jquery.easyui代码详解，和遇到的问题，提供大家在使用的时候少走弯路（一）
初次使用jquery.easyui这个东东，虽然简单，但还是很费力的去研究了一下使用，在使用过程中遇到的问题，下面代码会详细的注释到
引用的文件jquery.min.js
jquery.easyui.min.js
样式：icon.css
easyui.css
页面初始化easy ui 插件
<html xmlns="http://www.w3.org/1999/xhtml"> <div class="cg-op"> <div style="float:left;"> <a href="/inventory/diaobo_ck.aspx" class="easyui-linkbutton" data-options="iconCls:‘icon-add‘">新增调拨单</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-edit‘">标记为已打印</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-edit‘">导出</a> </div> <div style="float:right;"> <input class="easyui-textbox" data-options="prompt:‘搜索单据编号、商品名称、备注‘" style="width:200px;height:24px;"> <a href="#" id="btnSearch" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘" style="width:60px" >查询</a> <a href="#" class="easyui-linkbutton" style="width:80px">高级搜索</a> </div> </div> <table id="datagrid"></table>//数据表格 </html>
上面看到数据表格是个table，想必大家都不陌生，接下来初始化easyui
1 $(function () { 2 //初始化列表 3 InitGrid(""); 4 5 //初始化查询事件 6 BindSearchEvent(); 7 8 }) 9 10 //实现对DataGird控件的绑定操作 11 function InitGrid(queryData) { 12 $(‘#datagrid‘).datagrid({ //定位到Table标签，Table标签的ID是grid 13 url: ‘/ws/ws_OperateAllot.aspx?op=loaddata‘, //指向后台的Action来获取当前菜单的信息的Json格式的数据 14 title: ‘调拨入库‘, 15 iconCls: ‘icon-view‘, 16 loadMsg: "正在载入数据...", 17 height: 500, 18 width: function () { return document.body.clientWidth * 0.9 }, 19 nowrap: true,//是否禁止文字自动换行设置为 true，则把数据显示在一行里。设置为 true 可提高加载性能。 20 autoRowHeight: true,//行高是否自动 21 striped: true,//奇偶行使用不同背景色 22 collapsible: true,//是否可折叠 23 pagination: true,//分页是否显示 24 pageSize: 10,//每页多少条 25 //pageList: [20,50, 100, 200],//可选下拉每页多少条 26 rownumbers: true,//行号 27 fitColumns: false,//设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动 28 singleSelect: false,//设置为 true，则只允许选中一行。 29 checkOnSelect: false,//如果设置为 true，当用户点击某一行时，则会选中/取消选中复选框。如果设置为 false 时，只有当用户点击了复选框时，才会选中/取消选中复选框 30 //sortName: ‘ID‘, //根据某个字段给easyUI排序 31 sortOrder: ‘asc‘,//排序升序还是降序 32 remoteSort: false,//是否往后台发送排序 33 //idField: ‘ID‘,//数据库自增列，如果不绑定正确，会引发选中 34 35 queryParams: queryData, //异步查询的参数 36 //frozenColumns: [[ 37 // { 38 // field: ‘opt‘, title: ‘操作‘, width: 300, align: ‘left‘, fixed: false, 39 // formatter: function (value, rec) { 40 // var btn = ‘<a class="editcls" onclick="SetRoleInfo(\‘‘ + rec.userid + ‘\‘)" href="javascript:void(0)">编辑</a><a class="delcls" onclick="DelUser(\‘‘ + rec.userid + ‘\‘)" href="javascript:void(0)">删除</a>‘; 41 // return btn; 42 // } 43 // } 44 //]], 45 columns: [[ 46 //{ field: ‘ck‘, checkbox: false }, //选择 47 { title: ‘制单人‘, field: ‘inputman‘, width: 120, sortable: true }, 48 { title: ‘制单日期‘, field: ‘daytime‘, width: 120 }, 49 { title: ‘单据编号‘, field: ‘moveid‘, width: 120 }, 50 { title: ‘预计调拨日期‘, field: ‘outdate‘, width: 120 }, 51 { title: ‘调出仓库‘, field: ‘outsite‘, width: 120 }, 52 { title: ‘出库状态‘, field: ‘status‘, width: 80 }, 53 { title: ‘出库日期‘, field: ‘invaliddate‘, width: 120 }, 54 { title: ‘调入仓库‘, field: ‘insite‘, width: 120 }, 55 { 56 title: ‘入库状态‘, field: ‘insite‘, width: 80, 57 formatter: function (value, row, index) { //格式问题，格式不能应用在重复字段上，不然不起作用 58 return value; 59 } 60 }, 61 { 62 title: ‘入库日期‘, field: ‘daytime‘, width: 120, 63 styler: function (value, row) { //设置显示颜色,格式不能应用在重复字段上，不可以使用标签，不然无效，它只是纯样式就可以 64 // if(value<20)条件 65 66 return "color:red;"; 67 // the function can return predefined css class and inline style 68 // return {class:‘c1‘,style:‘color:red‘} 69 } 70 }, 71 { title: ‘备注‘, field: ‘remark‘, width: 120 }, 72 73 { 74 field: ‘opt‘, title: ‘操作‘, width: 150, align: ‘left‘, 75 formatter: function (value, rec) { 76 var btn = ‘<a class="editcls" onclick="SetRoleInfo(\‘‘ + rec.userid + ‘\‘)" href="javascript:void(0)">编辑</a><a class="delcls" onclick="DelUser(\‘‘ + rec.userid + ‘\‘)" href="javascript:void(0)">删除</a>‘; 77 return btn; 78 } 79 } 80 ]], 81 onLoadSuccess: function (data) { 82 $(‘.editcls‘).linkbutton({ text: ‘编辑‘, plain: true, iconCls: ‘icon-edit‘ }); 83 $(‘.getcls‘).linkbutton({ text: ‘查看‘, plain: true, iconCls: ‘icon-search‘ }); 84 $(‘.delcls‘).linkbutton({ text: ‘删除‘, plain: true, iconCls: ‘icon-clear‘ }); 85 } 86 //onClickRow: function (rowIndex, rowData) { 87 // alert(rowIndex); 88 // $(this).datagrid(‘selectRow‘, rowIndex); 89 //}, 90 }) 91 92 //////设置分页控件 93 var p = $(‘#datagrid‘).datagrid(‘getPager‘); 94 $(p).pagination({ 95 showPageList: true, 96 pageSize: 10,//每页显示的记录条数，默认为10 97 pageList: [10, 20, 30,50,100],//可以设置每页记录条数的列表 98 beforePageText: ‘第‘,//页数文本框前显示的汉字 99 afterPageText: ‘页 共 {pages} 页‘, 100 displayMsg: ‘当前显示 {from} - {to} 条记录 共 {total} 条记录‘, 101 /*onBeforeRefresh:function(){ 102 $(this).pagination(‘loading‘); 103 alert(‘before refresh‘); 104 $(this).pagination(‘loaded‘); 105 }*/ 106 }); 107 108 };
上面各个属性已经注释的很详细了，相信大家应该可以看的懂，不懂得可以咨询我
着重说几个范二的问题，当时自己做的时候走了弯路：
一、idField 这个属性，一定要注意，绑定数据库自增或者不会有重复数据的列，不然后边获取选中多行的数据时，打死你就只能获取到选中第一列的值，要麽就不绑定，不写，
建议写上，指不定哪里还是需要这个属性的，暂时我还没发现，有知道了朋友可以留个言，交流一下，非常感谢啦
二、分页这个呢，我是重新绑定的，也可以在里面属性设置，要绑定的话，注意这个属性showPageList要写哦，不然不显示的呢
三、就是表格列内容格式化问题了，这个不注意的话，也会出很多幺蛾子，浪费很多精力和时间，当时本人就是看官方例子啊，百度查啊 ，但给的代码都是和官方一样的
什么问题呢？ 小二这就给客官解释一下，我当时由于为了填充数据，实际没有那么多列，所以绑定数据的时候就把列重复绑定了，页面呈现是没有问题的
但是格式化和内容显示为红色啊，背景变色啊，这些发现都没有效果了，why!why!why!why!!!!,其实一直不晓得问题所在，当然也是官网，度娘啊的
查寻，大神都给的是官网demo一样的代码，最后终于一个大神也遇到这个问题了，哈哈，原来是绑定的列重复了，前面的字段和后边的列字段名称
是一样的，但是前面的没格式化，后边的格式化，所以就出现了没有效果的问题，所以啊，注意细节问题，还是蛮重要的
当然颜色这个格式化问题，和网上说的不太一样，有的都给的<span style=‘color:red;‘>sss</span>返回，试了很多次，去火狐浏览器
查看元素发现，<td style=‘<span style=‘color:red;‘>sss</span>‘></td>这样了，
所以加颜色的话，只返回 color:red;这样即可，不要想当然哦！
接下来说一下获取行问题，其实啊，上面说了一点问题了，也是比较坑的，我是研究一个java童鞋说的源码的判断问题，才解决的
当然啦，非常感谢那位大神啊救我于水火之中
function GetSelectedRows() { //idField 注意此字段要绑定的话必须是数据库自增的或者不重复数据的列，不然只能或许第一列值 var ss = []; var rows = $(‘#datagrid‘).datagrid(‘getSelections‘);//选中的多行 //var rows = $(‘#datagrid‘).datagrid(‘getSelected‘);单行的 for (var i = 0; i < rows.length; i++) { var row = rows[i]["moveid"];//1获取行的值 //var row = rows[i].moveid;//2获取行的值 alert(row); } }
获取选中行的数据问题，在强调一下idField-------绑定的问题，引发的问题，就是获取多行的值时候，都是一个第一行的值，不会循环得到所有行，这个值呢跟当前页选中也数据也是有关系的，所以慎重对待它哦
解析一下为什么，因为绑定一列数据有可能重复的数据的话，当选中多行的时候，它认为你选中的都是一样的数据，因为idField它绑定的数据重复了，即一样的行
接下来就是查询了
//绑定查询按钮的的点击事件 function BindSearchEvent() { //按条件进行查询数据，首先我们得到数据的值 $("#btnSearch").click(function () { //取值有几种方式：$("#id").combobox(‘getValue‘), $("#id").datebox(‘getValue‘), $("#id").val() var queryParams = { IdOrName: $(".easyui-textbox").val(), } //将值传递给 InitGrid(queryParams); return false; }); }
这个呢等于说是重新绑定了一下，获取有什么reload什么的，也可以做到吧没去研究，既然封装了，就传参数进去重新调用了一下，效果都一样，上面注释获取值的方法也写了。
好久不写心得和研究这么东西了，感觉写起来还挺费劲，也是项目用到这个，花时间一天时间研究一下，趁加班，整理了一下，希望可以给初学的同行，一点点指导，少走一些弯路，少花费一些时间，让你的领导对你刮目相看
在很短时间内去适应，搞定一个东东，里面还有很多东西没去研究，比如动态 行编辑，增加，删除，以后用到再继续更新吧，祝大家新年快乐！
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
