本文先列出easyui中需要掌握的关键点，然后html + js代码示例。
0.关于easyui引用
easyui.css为easyui的样式，可以通过引用themes文件夹下不同的css改变风格icon.css为easyui的图标样式，data-options="iconCls:'icon-search',plain:true"中icon-search就是引用该图标
jquery.min.js为jquery压缩版，必须引用
jquery.easyui.min.js是easyui js压缩版，必须引用
easyui-lang-zh_CN.js是easyui语言包，可以更换成其他语言
validator-rules-extend.js是easyui的扩展校验，此处并未使用
1.easyui的初始化
easyui部件有两种初始化方式，一是采用html，二是采用js
easyui-linkbutton的用法就是html方式。href="javascript:void(0)"防止用户点击时页面跳转
数据表格采用js方式。
2.带有条件筛选与分页功能的easyui datagrid
每次分页时要把分页大小、页码、筛选条件同时传给controller，故要重定义datagrid的onSelectPage事件
由于筛选条件可能有多个，故采用 $('#toolbar_form').serialize() + '&page=1&rows=2'处理
每次datagrid loadData，行号都会变回1,2,3,4，需要重新计算行号并刷新
3.下面代码还举例了easyui messager和动态加载数据到combobox的方法
4.注意html中局部变量的问题
rcvManage.jsp前端页面代码：
<head>
<!-- easyui -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5/themes/icon.css">
<script src="jquery-easyui-1.5/jquery.min.js"></script>
<script src="jquery-easyui-1.5/jquery.easyui.min.js"></script>
<script src="jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
<!-- easyui end -->
<script src="js/rcv/rcvManage.js"></script>
<script src="jquery-easyui-1.5/extension/validator-rules-extend.js"></script>
</head>
<body>
<!-- 表格 -->
<table id="dg"></table>
<!-- 表格end -->
<!-- 表格工具栏 -->
<div id="tb" >
<form id="toolbar_form" method="post">
按支行筛选:<input id="toolbar_br_no" class="easyui-combobox" name="branchNo" prompt="下拉选择" style="width:150px" data-options="required:false" />
</form>
<div align="right">
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="filter()" data-options="iconCls:'icon-search',plain:true">查询</a>
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="batchRcv()" data-options="iconCls:'icon-ok',plain:true">批量接收</a>
</div>
</div>
<!-- 表格工具栏end -->
</body>
// 不能写在$(document).ready()中，局部变量问题
var filterUrl = './rcv/getRcvFile.do';
var batchRcvUrl = './rcv/batchRcv.do';
/**
* 按toolbar条件进行筛选
*/
function filter() {
// 不能使用load方法，无法将表单参数返回给controller
//$('#dg').datagrid('load', filterUrl);
// 动态获取当前pageSize，而page默认设置为1
// serialize()自动获取form参数
var pageOptions = $('#dg').datagrid('getPager').data('pagination').options;
var paramUrl = $('#toolbar_form').serialize() + '&page=1&rows=' + pageOptions.pageSize;
// 采用getJson无法处理error事件，比如session超时，后台controller响应失败等问题
$.getJSON(filterUrl, paramUrl, function(json) {
//alert(JSON.stringify(json.res));
// 加载到datagrid
$('#dg').datagrid("loadData", json);
});
}
/**
* 重置条件筛选框
*/
function reset() {
$("#toolbar_form").form('clear');
}
/**
* 批量接收
*/
function batchRcv() {
var rows = $('#dg').datagrid('getSelections');
if (rows.length < 1 || rows.length > 20) {
$.messager.alert('提示', '至少选择1行,最多选择20行！');
return false;
}
var ids=[];
for (var i = 0; i < rows.length; i++) {
var id=rows[i].fileId;//取出id值
// 避免重复id
if ($.inArray(id, ids) == -1) {
ids.push(id);
}
}
var params = $.param({'ids':ids},true);
// easyui中弹出框使用
$.messager.confirm('提示', '确定批量接收所选记录？', function(r){
if(r){
$.ajax({
url : batchRcvUrl,
data: params,
cache : false,
async : false,
type : "POST",
dataType : 'json',
success : function (result){
var msg = '';
if(result.success) {
msg = '接收成功';
} else {
// 带有html样式的消息提示
msg = '<span style="color: red;">' + '接收失败，出错原因: ' + result.msg + '</span>';
}
$.messager.alert('提示', msg);
// 无论成功失败，都刷新表格
$("#dg").datagrid('reload');
// 清除旧数据，以免下次会被选中
$("#dg").datagrid('clearSelections');
},
error : function() {
$.messager.alert('错误', '无法请求到服务器，请刷新或稍后重试！');
}
});
}
});
}
$(document).ready(function() {
$('#dg').datagrid({
fit : true, // 完全填充，继承自父类pannel的属性
nowrap : false, // 是否只显示一行，即文本过多是否省略部分
striped : true, // 间隔条纹
singleSelect : false, // 允许单选
ctrlSelect : false, // 允许使用ctrl多选
rownumbers : true, // 行号
scrollbarSize : 0, // 去掉右侧滚动条列
pagination : true, // 包含分页
pageSize : 20, // 分页值
pageList : [20], // 可以设置每页记录条数的列表
toolbar : '#tb', // 工具栏
idField : 'fileId', // row的id
columns : [[
{field:'ck',checkbox:true},
{field:'fileId',title:'档案编号',width:110,align:'center'},
{field:'branchName',title:'支行名称',width:100,align:'center'}
]],
url : filterUrl
});
// 重新定义了datagrid分页对象的onSelectPage事件
var p = $('#dg').datagrid('getPager');
p.pagination({
onSelectPage: function (pageNumber, pageSize) {
$.messager.progress({ text: '数据加载中....' });
//alert('onSelectPage pageNumber:' + pageNumber + ',pageSize:' + pageSize);
PageDataGridView(pageNumber, pageSize);//重新加载
$.messager.progress('close');
}
});
function PageDataGridView(page,rows) {
// serialize()自动获取form参数
var params = $('#toolbar_form').serialize() + '&page=' + page + '&rows=' + rows;
$.getJSON(filterUrl, params, function(json) {
//alert(JSON.stringify(json.res));
// 重新加载数据到datagrid，行号会变回1,2,3,4
$('#dg').datagrid("loadData", json);
//重新计算行号（通过jquery选择器选择所有行号）
var rowNumbers = $('.datagrid-cell-rownumber');
// 遍历这个行号数组
$(rowNumbers).each(function(index) {
// 由于每次都有loadData操作，行号数组都会变回1,2,3,4
// 故需要使用page和rows同时计算序号偏移量
var row = parseInt((page - 1) * rows) + index + 1;
// 清空当前行号，设置为新行号
$(rowNumbers[index]).html("");
$(rowNumbers[index]).html(row);
});
//必须使用refresh方法，将重新计算的序号应用到datagrid
$('#dg').datagrid('getPager').pagination('refresh', {total : json.total, pageNumber : page});
});
}
// 加载支行列表
function loadBranchList() {
// easyui动态加载json内嵌对象必须这样处理
$.getJSON('./branch/getBranches.do', function(json) {
// 打印json
//console.log(JSON.stringify(json.res));
$('#toolbar_br_no').combobox({
data : json.res, // 取json对象的内嵌子对象
valueField : 'branchNo', // 值字段
textField : 'branchName', // 显示的字段
panelHeight:'100px',
editable : false,// 不可编辑，只能选择
// 添加额外数据
loadFilter : function(data) {
data.unshift({
branchNo : '',
branchName : '----'
});
return data;
}
});
});
}
});补充：
getJSON方法存在中文乱码的问题，将getJSON方法替换成post方法，重写后的PageDataGridView方法如下
function PageDataGridView(page,rows) {
// serialize()自动获取form参数
var params = $('#toolbar_form').serialize() + '&page=' + page + '&rows=' + rows;
// 不使用getjson方法，会存在中文乱码情况
$.post(filterUrl, params, function(data) {
//alert(JSON.stringify(data));
// 必须是json对象，不能是json格式字符串
// 解决办法：json格式字符串转json对象
var jsonObj = JSON.parse(data);
// 加载到datagrid
$('#dg').datagrid("loadData", jsonObj);
//重新计算序号class=datagrid-cell-rownumber
//rowNumbers对象是表格每行开头的序号html对象
var rowNumbers = $('.datagrid-cell-rownumber');
// 遍历这个序号数组
$(rowNumbers).each(function(index) {
// $(rowNumbers[index]).html() 表示当前数组的序号
// 由于每次都有loadData操作，数组都会变回1,2,3,4
// 故需要使用page和rows同时计算序号偏移量
var row = parseInt((page - 1) * rows) + index + 1;
$(rowNumbers[index]).html("");
$(rowNumbers[index]).html(row);
});
//必须使用refresh方法，将重新计算的序号应用到表格
$('#dg').datagrid('getPager').pagination('refresh', {total : jsonObj.total, pageNumber : page});
});
}
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
