jquery easyui 封装
使用easyui datagrid部分，主要是节省了写一堆html代码。
通过封装，可以节省每个页面都写一堆easyui的代码，相对要简单一些，个人觉得，毕竟是自己做的，难免自我感觉好些，哈哈。
封装好了之后，只需要在html中引用各种需要库，并在body中写<table id="myid"><table>
然后js中调用baseGrid('myid',"focus_ft","<{:U('Focus/focuslist')}>",cols,data_opt); 即可。
该方法中第一个参数，是table id，
第二个参数是需要加的一些过滤功能的所在的div 的id，比如红框的区域
第三个参数是加载数据的地址，可以是一个路由路径，或者别的数据地址比如静态文件地址,例子中的uri是thinkphp的路由地址
第四个参数，是列的配置，有多少列，配置多少个，就复制粘贴的活，应该是挺轻松的。见
第五个参数是需要改变的配置，具体配置项参考easyui官方文档，可以省略，会默认加载。
所以必须要的就是下面框内的东西啦（注意啦，
formatter:orderOperateFormatter 这个东西是什么？
orderOperateFormatter这个是一个js方法，自己写，每个页面都不一样。比如编辑，删除等。
其他的列如果有需要也可以这么写，这是easyui的属性
$(function(){
var data_opt = {
'pageList':[5,10, 20, 30,50],
'pageSize':10,
"sortName":"id",
"sortOrder":"desc"
};
var cols = [[ //注意要两个嵌套的中括号
{ field:'ck', checkbox:true },
{ field:'id', title: '单号', width: 60, align: 'center', sortable: true },
{ field:'name', title: '推荐位名称', width: 80, align: 'center'},
{ field:'m', title: '管理操作', width: 80, align: 'center', formatter:orderOperateFormatter }
]];
baseGrid('dg',"focus_ft","<{:U('Focus/focuslist')}>",cols);
});
function orderOperateFormatter(val){
var btn = [];
btn.push('<a id="btedit" href="__URL__/modify/id/'+val+'">编辑</a>');
btn.push('<a id="btdel" href="#">删除</a>');
return btn.join("|");
}
下面是页面部分，和封装的完整代码。
页面部分：
<body>
<div class="right-page">
<form id="submitForm" name="submitForm" action="" method="post">
<div class="order-search">
<span>
<input type="hidden" name="ids">
<input id="roleBt70" type="button" class="order-search-button" onclick="allDel()" value="全部删除"/>
<input id="roleBt71" type="button" class="order-search-button" onclick="allDisplay()" value="全部显示"/>
<input id="roleBt72" type="button" class="order-search-button" onclick="allHidden()" value="全部隐藏"/>
</span>
</div>
</form>
<div class="order-list">
<div class="order-list-table">
<table id="dg" title="推荐位" style="width:80%;height:650px" >
</table>
</div>
</div>
<div id="focus_ft" class="order-search">
<form>
<span>
<select name="search[type]" id="order_select_one">
<option value="id">单号</option>
<option value="name">名称</option>
</select>
</span>
<span>
<input name="search[txt_value]" type="text" size="15" />
</span>
<span>
发布日期：
<input type="text" size="20" name="search[date_from]" class="Wdate" onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss'})" />-<input type="text" size="20" name="search[date_to]" class="Wdate" onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss'})"/>
</span>
<input type="button" id="roleBt1" value="查 询" class="order-search-button" onclick="search('dg',this);" />
</form>
</div>
<br/>
</div>
</body>
封装js代码：
/*version 1.0
*mj
*/
/**点击后列出该行的扩展内容，使用此方法
* id:grid 的ID
* dg_toolbar：grid的复杂操作部分id，"dg_area_id"
* Url:获取数据URL地址,--"<{:U('Focus/focuslist')}>"--"a.json"
* expandUrl:隐藏内容URL地址
* cols:列信息var cols = [[ //注意要两个嵌套的中括号
{ field:'id', title: '单号', width: 60, align: 'center', sortable: true },
{ field:'name', title: '推荐位名称', width: 80, align: 'center'},
{ field:'m', title: '管理操作', width: 80, align: 'center', formatter:orderOperateFormatter }
]];
* data_opt：grid属性，可省略 var data_opt = {
'pageList':[10, 20, 30,50],
'pageSize':10,
};
*/
function expandGrid(id,dg_toolbar,mainUrl,expandUrl,cols,data_opt){
var default_opt = {
'border':false,
'fit':true,
'fitColumns':true,
'rownumbers':true,
'singleSelect':false,
'checkOnSelect':false,
'selectOnCheck':true,
'pagination':true,
'pageList':[10, 20, 30, 50],
'pageSize':10
};
for(opt in data_opt){
default_opt[opt]=data_opt[opt];
}
$('#'+id).datagrid({
url: mainUrl,
loadMsg: '数据加载中,请稍候...',
pageSize: default_opt["pageSize"],
pageList: default_opt["pageList"],
pagination:default_opt["pagination"],
singleSelect:default_opt["singleSelect"],
fitColumns:default_opt["fitColumns"],
checkOnSelect:default_opt["checkOnSelect"],
selectOnCheck:default_opt["selectOnCheck"],
view: detailview,
toolbar: dg_toolbar==""?"":"#"+dg_toolbar,
columns:cols,
detailFormatter:function(index,row){
return '<div class="ddv" style="padding:5px 0"></div>';
},
onExpandRow: function(index,row){
var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
ddv.panel({
height:"auto",
border:false,
cache:false,
href:expandUrl+row.id,
onLoad:function(){
$('#'+id).datagrid('fixDetailRowHeight',index);
}
});
$('#'+id).datagrid('fixDetailRowHeight',index);
}
});
}
/**普通grid展示
* id:grid 的ID
* dg_toolbar：grid的复杂操作部分id，"dg_area_id"
* Url:获取数据URL地址,--"<{:U('Focus/focuslist')}>"--"a.json"
* cols:列信息var cols = [[ //注意要两个嵌套的中括号
{ field:'id', title: '单号', width: 60, align: 'center', sortable: true },
{ field:'name', title: '推荐位名称', width: 80, align: 'center'},
{ field:'m', title: '管理操作', width: 80, align: 'center', formatter:orderOperateFormatter }
]];
* data_opt：grid属性，可省略 var data_opt = {
'pageList':[10, 20, 30,50],
'pageSize':10,
};
*/
function baseGrid(id,dg_toolbar,Url,cols,data_opt){
var default_opt = {
'border':false,
'fit':true,
'fitColumns':true,
'rownumbers':true,
'singleSelect':false,
'checkOnSelect':false,
'selectOnCheck':true,
'pagination':true,
'pageList':[5, 10, 20, 30, 50],
'pageSize':10
};
for(opt in data_opt){
default_opt[opt]=data_opt[opt];
}
$('#'+id).datagrid({
url: Url,
loadMsg: '数据加载中,请稍候...',
pageSize: default_opt["pageSize"],
pageList: default_opt["pageList"],
pagination:default_opt["pagination"],
singleSelect:default_opt["singleSelect"],
fitColumns:default_opt["fitColumns"],
checkOnSelect:default_opt["checkOnSelect"],
selectOnCheck:default_opt["selectOnCheck"],
toolbar: dg_toolbar==""?"":"#"+dg_toolbar,
columns:cols
});
}
function contains(arr, obj) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === obj) {
return true;
}
}
return false;
}
/*获取grid的id串，以，隔开，如果是字符串，则以'',''进行隔开
*grid_id grid的id
*id 要组拼的字段id
*/
function getSelections(grid_id,id){
var rows = $("#"+grid_id).datagrid('getSelections');
var ss=[];
for(var i=0; i<rows.length; i++){
var row = rows[i];
ss.push(eval("row."+id));
}
return ss.join(',');
}
/*
* 查询方法，查询区域必须用<form></form>包裹住，方便提交服务器处理
* 传入grid的id,that表示查询按钮，传入this即可
*/
function search(grid_id,that){
var data = $("#"+grid_id);
var queryParams = data.datagrid('options').queryParams;
$.each($(that).parent('form').serializeArray(), function() {
queryParams[this['name']] = this['value'];
});
data.datagrid({
pageNumber: 1
});
}
Jquery EasyUI封装简化操作
//confirm
function Confirm(msg, control) {
$.messager.confirm('确认', msg, function (r) {
if (r) {
eval(control.toString().slice(11));
}
});
return false;
}
//load
function Load() {
$("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body");
$("<div class=\"datagrid-mask-msg\"></div>").html("正在运行，请稍候。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 });
}
//display Load
function dispalyLoad() {
$(".datagrid-mask").remove();
$(".datagrid-mask-msg").remove();
}
//弹出提醒框alert
function showMsg(title, msg, isAlert) {
if (isAlert !== undefined && isAlert) {
$.messager.alert(title, msg);
} else {
$.messager.show({
title: title,
msg: msg,
showType: 'show'
});
}
}
//删除确认confirm
function deleteConfirm() {
return showConfirm('温馨提示', '确定要删除吗?');
}
//弹出确认框confirm
function showConfirm(title, msg, callback) {
$.messager.confirm(title, msg, function (r) {
if (r) {
if (jQuery.isFunction(callback))
callback.call();
}
});
}
//进度条
function showProcess(isShow, title, msg) {
if (!isShow) {
$.messager.progress('close');
return;
}
var win = $.messager.progress({
title: title,
msg: msg
});
}
//弹出框体window
function showMyWindow(title, href, width, height, modal, minimizable, maximizable) {
$('#myWindow').window({
title: title,
width: width === undefined ? 600 : width,
height: height === undefined ? 400 : height,
content: '<iframe scrolling="yes" frameborder="0" src="' + href + '" style="width:100%;height:98%;"></iframe>',
// href: href === undefined ? null : href,
modal: modal === undefined ? true : modal,
minimizable: minimizable === undefined ? false : minimizable,
maximizable: maximizable === undefined ? false : maximizable,
shadow: false,
cache: false,
closed: false,
collapsible: false,
resizable: false,
loadingMessage: '正在加载数据，请稍等片刻......'
});
}
//关闭弹出框体 window
function closeMyWindow() {
$('#myWindow').window('close');
}
/**
*清空指定表单中的内容,参数为目标form的id
*注：在使用Jquery EasyUI的弹出窗口录入新增内容时，每次打开必须清空上次输入的历史
*数据，此时通常采用的方法是对每个输入组件进行置空操作:$("#name").val(""),这样做，
*当输入组件比较多时会很繁琐，产生的js代码很长，这时可以将所有的输入组件放入个form表单
*中，然后调用以下方法即可。
*
*@param formId将要清空内容的form表单的id
*/
function resetContent(formId) {
var clearForm = document.getElementById(formId);
if (null != clearForm && typeof (clearForm) != "undefined") {
clearForm.reset();
}
}
/**
*刷新DataGrid列表(适用于Jquery Easy Ui中的dataGrid)
*注：建议采用此方法来刷新DataGrid列表数据(也即重新加载数据)，不建议直接使用语句
*$('#dataTableId').datagrid('reload');来刷新列表数据，因为采用后者，如果日后
*在修改项目时，要在系统中的所有刷新处进行其他一些操作，那么你将要修改系统中所有涉及刷新
*的代码，这个工作量非常大，而且容易遗漏；但是如果使用本方法来刷新列表，那么对于这种修
*该需求将很容易做到，而去不会出错，不遗漏。
*
*@paramdataTableId将要刷新数据的DataGrid依赖的table列表id
*/
function flashTable(dataTableId) {
$('#' + dataTableId).datagrid('reload');
}
/**
*取消DataGrid中的行选择(适用于Jquery Easy Ui中的dataGrid)
*注意：解决了无法取消"全选checkbox"的选择,不过，前提是必须将列表展示
*数据的DataGrid所依赖的Table放入html文档的最全面，至少该table前没有
*其他checkbox组件。
*
*@paramdataTableId将要取消所选数据记录的目标table列表id
*/
function clearSelect(dataTableId) {
$('#' + dataTableId).datagrid('clearSelections');
//取消选择DataGrid中的全选
$("input[type='checkbox']").eq(0).attr("checked", false);
}
/**
*关闭Jquery EasyUi的弹出窗口(适用于Jquery Easy Ui)
*
*@paramdialogId将要关闭窗口的id
*/
function closeDialog(dialogId) {
$('#' + dialogId).dialog('close');
}
/**
*自适应表格的宽度处理(适用于Jquery Easy Ui中的dataGrid的列宽),
*注：可以实现列表的各列宽度跟着浏览宽度的变化而变化，即采用该方法来设置DataGrid
*的列宽可以在不同分辨率的浏览器下自动伸缩从而满足不同分辨率浏览器的要求
*使用方法：(如:{field:'ymName',title:'编号',width:fillsize(0.08),align:'center'},)
*
*@parampercent当前列的列宽所占整个窗口宽度的百分比(以小数形式出现，如0.3代表30%)
*
*@return通过当前窗口和对应的百分比计算出来的具体宽度
*/
function fillsize(percent) {
var bodyWidth = document.body.clientWidth;
return (bodyWidth - 90) * percent;
}
/**
* 获取所选记录行(单选)
*
* @paramdataTableId目标记录所在的DataGrid列表的table的id
* @paramerrorMessage 如果没有选择一行(即没有选择或选择了多行)的提示信息
*
* @return 所选记录行对象，如果返回值为null,或者"null"(有时浏览器将null转换成了字符串"null")说明没有
*选择一行记录。
*/
function getSingleSelectRow(dataTableId, errorMessage) {
var rows = $('#' + dataTableId).datagrid('getSelections');
var num = rows.length;
if (num == 1) {
return rows[0];
} else {
$.messager.alert('提示消息', errorMessage, 'info');
return null;
}
}
/**
* 在DataGrid中获取所选记录的id,多个id用逗号分隔
* 注：该方法使用的前提是：DataGrid的idField属性对应到列表Json数据中的字段名必须为id
* @paramdataTableId目标记录所在的DataGrid列表table的id
*
* @return 所选记录的id字符串(多个id用逗号隔开)
*/
function getSelectIds(dataTableId, noOneSelectMessage) {
var rows = $('#' + dataTableId).datagrid('getSelections');
var num = rows.length;
var ids = null;
if (num < 1) {
if (null != noOneSelectMessage) $.messager.alert('提示消息', noOneSelectMessage, 'info');
return null;
} else {
for (var i = 0; i < num; i++) {
if (null == ids || i == 0) {
ids = rows[i].id;
} else {
ids = ids + "," + rows[i].id;
}
}
return ids;
}
}
/**
*删除所选记录(适用于Jquery Easy Ui中的dataGrid)(删除的依据字段是id)
*注：该方法会自动将所选记录的id(DataGrid的idField属性对应到列表Json数据中的字段名必须为id)
*动态组装成字符串，多个id使用逗号隔开(如：1,2,3,8,10)，然后存放入变量ids中传入后台，后台
*可以使用该参数名从request对象中获取所有id值字符串，此时在组装sql或者hql语句时可以采用in
*关键字来处理，简介方便。
*另外，后台代码必须在操作完之后以ajax的形式返回Json格式的提示信息，提示的json格式信息中必须有一个
*message字段，存放本次删除操作成功与失败等一些提示操作用户的信息。
*
*@paramdataTableId将要删除记录所在的列表table的id
*@paramrequestURL与后台服务器进行交互，进行具体删除操作的请求路径
*@paramconfirmMessage 删除确认信息
*/
function deleteNoteById(dataTableId, requestURL, confirmMessage) {
if (null == confirmMessage || typeof (confirmMessage) == "undefined" || "" == confirmMessage) {
confirmMessage = "确定删除所选记录?";
}
var rows = $('#' + dataTableId).datagrid('getSelections');
var num = rows.length;
var ids = null;
if (num < 1) {
$.messager.alert('提示消息', '请选择你要删除的记录!', 'info');
} else {
$.messager.confirm('确认', confirmMessage, function (r) {
if (r) {
for (var i = 0; i < num; i++) {
if (null == ids || i == 0) {
ids = rows[i].id;
} else {
ids = ids + "," + rows[i].id;
}
}
$.getJSON(requestURL, { "ids": ids }, function (data) {
if (null != data && null != data.message && "" != data.message) {
$.messager.alert('提示消息', data.message, 'info');
flashTable(dataTableId);
} else {
$.messager.alert('提示消息', '删除失败！', 'warning');
}
clearSelect(dataTableId);
});
}
});
}
}
在次封装easyui 的window插件，便于简化操作
插件代码：
$.fn.hWindow = function(options){
var defaults = {
width: 500, //宽度
height: 400, //高度
iconCls: '', //图标class
collapsible: false, //折叠
minimizable: false, //最小化
maximizable: false, //最大化
resizable: false, //改变窗口大小
title: '窗口标题', //窗口标题
modal: true, //模态
submit: function () {
alert('写入执行的代码。');
},
html: ''
}
var options = $.extend(defaults,options);
var html = options.html;
$('#w').window({title:options.title,width:options.width,height:options.height,content:buildWindowContent(html,options.submit),
collapsible:options.collapsible,minimizable:options.minimizable,maximizable:options.maximizable,
modal:options.modal,iconCls:options.iconCls
}).window('open');
function buildWindowContent(contentHTML,fn)
{
var centerDIV = $('<div region="center" border="false" style="padding:5px;"></div>').html(contentHTML);
$('<div class="easyui-layout" fit="true"></div>')
.append(centerDIV)
.append('<div region="south" border="false" style="padding-top:5px;height:40px; overflow:hidden; text-align:center;background:#fafafa;border-top:#eee 1px solid;"> <a iconCls="icon-ok">确定</a><a iconCls="icon-cancel">取消</a></div>')
.appendTo($('#w').empty())
.layout();
$('.easyui-layout a[iconCls]').linkbutton();
$('a[iconCls="icon-cancel"]').click(function(){
$('#w').window('close');
});
$('a[iconCls="icon-ok"]').unbind('click').click(fn);
}
}
可以将上面的代码保存到一个JS文件中，便于以后使用时直接引入即可，我在例子将此代码保存为 jQuery-easyui-window-expand.js
需要引入css和js 文件：
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../jquery.easyui.min.js"></script> <script type="text/javascript" src="jQuery-easyui-window-expand.js"></script>
HTML：
<input type="button" value="新窗口" id="btnOpen" > <input type="button" value="新窗口1" id="btnOpen1" > <input type="button" value="新窗口2" id="btnOpen2" > <!--用于弹出窗口的DIV--> <div id="w" ></div>
JS调用：
$('#w').hWindow();
完整代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="疯狂秀才">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript" src="jQuery-easyui-window-expand.js"></script>
<script type="text/javascript">
$(function(){
$('#btnOpen').click(function(){
var html = '<input type="text" id="text1" name="">';
var fn = function(){
alert($('#text1').val());
}
$('#w').hWindow({html:html,submit:fn});
});
$('#btnOpen1').click(function(){
var html = '<input type="text" id="text1" name=""><input id="btn1" type="button" value="提交" onclick="">';
var fn = function(){
alert('第二个窗口');
}
$('#w').hWindow({html:html,title:'第二个窗口',submit:fn});
$('#btn1').click(function(){
alert($(this).prev().val());
});
});
$('#btnOpen2').click(function(){
var html = '<textarea name="" rows="" cols=""></textarea><input type="checkbox" name="">';
var fn = function(){
alert('第三个窗口');
}
$('#w').hWindow({iconCls:'icon-save',html:html,title:'第三个窗口',submit:fn});
});
})
</script>
</head>
<body>
<input type="button" value="新窗口" id="btnOpen" >
<input type="button" value="新窗口1" id="btnOpen1" >
<input type="button" value="新窗口2" id="btnOpen2" >
<div id="w" ></div>
</body>
</html>
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索数据
， 参数
， 代码
配置
easyui datagrid 封装、easyui 封装、easyui tree 封装、easyui 二次封装、easyui组件封装，以便于您获取更多的相关知识。
时间： 2024-07-30 20:27:42