初次使用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 };初始化easyui上面各个属性已经注释的很详细了，相信大家应该可以看的懂，不懂得可以咨询我
着重说几个范二的问题，当时自己做的时候走了弯路：
一、idField 这个属性，一定要注意，绑定数据库自增或者不会有重复数据的列，不然后边获取选中多行的数据时，打死你就只能获取到选中第一列的值，要麽就不绑定，不写，
建议写上，指不定哪里还是需要这个属性的，暂时我还没发现，有知道了朋友可以留个言，交流一下，非常感谢啦
二、分页这个呢，我是重新绑定的，也可以在里面属性设置，要绑定的话，注意这个属性showPageList要写哦，不然不显示的呢
新闻热点
疑难解答
