easyui使用总结（一）

来源：互联网发布：sql创建学生数据库编辑：程序博客网时间：2024/05/17 12:20

本文先列出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" onclick="filter()" data-options="iconCls:'icon-search',plain:true">查询</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="batchRcv()" data-options="iconCls:'icon-ok',plain:true">批量接收</a></div></div><!-- 表格工具栏end --></body>

rcvManage.js代码：

// 不能写在$(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值// 避免重复idif ($.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的idcolumns : [[{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});});}

0 0