初次使用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什么的，也可以做到吧沒去研究，既然封裝了，就傳參數進去重新調用了一下，效果都一樣，上面注釋獲取值的方法也寫了。
好久不寫心得和研究這么東西了，感覺寫起來還挺費勁，也是項目用到這個，花時間一天時間研究一下，趁加班，整理了一下，希望可以給初學的同行，一點點指導，少走一些彎路，少花費一些時間，讓你的領導對你刮目相看
在很短時間內去適應，搞定一個東東，里面還有很多東西沒去研究，比如動態 行編輯，增加，刪除，以后用到再繼續更新吧，祝大家新年快樂！