jquery.easyui代碼詳解，和遇到的問題，提供你們在使用的時候少走彎路（一）

時間 2019-12-13

標籤 jquery.easyui jquery easyui 代碼詳解遇到問題提供你們在使用的時候少走彎路欄目 JQuery 简体版

原文原文鏈接

初次使用jquery.easyui這個東東，雖然簡單，但仍是很費力的去研究了一下使用，在使用過程當中遇到的問題，下面代碼會詳細的註釋到javascript

引用的文件jquery.min.js
jquery.easyui.min.jscss

樣式：icon.css
easyui.csshtml

頁面初始化easy ui 插件java

<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，想必你們都不陌生，接下來初始化easyuijquery

  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

上面各個屬性已經註釋的很詳細了，相信你們應該能夠看的懂，不懂得能夠諮詢我數據庫

着重說幾個範二的問題，當時本身作的時候走了彎路：瀏覽器

1、idField 這個屬性，必定要注意，綁定數據庫自增或者不會有重複數據的列，否則後邊獲取選中多行的數據時，打死你就只能獲取到選中第一列的值，要麼就不綁定，不寫，異步

建議寫上，指不定哪裏仍是須要這個屬性的，暫時我還沒發現，有知道了朋友能夠留個言，交流一下，很是感謝啦
ide

2、分頁這個呢，我是從新綁定的，也能夠在裏面屬性設置，要綁定的話，注意這個屬性showPageList要寫哦，否則不顯示的呢性能

3、就是表格列內容格式化問題了，這個不注意的話，也會出不少幺蛾子，浪費不少精力和時間，當時本人就是看官方例子啊，百度查啊，但給的代碼都是和官方同樣的

什麼問題呢？小二這就給客官解釋一下，我當時因爲爲了填充數據，實際沒有那麼多列，因此綁定數據的時候就把列重複綁定了，頁面呈現是沒有問題的

可是格式化和內容顯示爲紅色啊，背景變色啊，這些發現都沒有效果了，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;
              });
          }