easyui 的使用

這幾天搞了一下easyUI 的東西，感覺自己學習效率還是很高的，已經迅速完成了任務，廢話不多說，總結一下吧，不要做完就忘記了！

要使用easyui 首先要先引入相應的jar包，而且要注意引入的順序，jquery的jar包要先引入，如下：
    <link rel="stylesheet" type="text/css" href="<%=basePath %>easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath %>easyui/themes/icon.css">
    <script type="text/javascript" src="<%=basePath %>js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="<%=basePath %>easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="<%=basePath %>easyui/locale/easyui-lang-zh_CN.js"></script>

我要用的是 datagrid 來展示數據
// 接下來就是數據表的初始化了 如下：
 $("#tt").datagrid({
        remoteSort: false, //遠程服務器排序，指定爲false 則表示爲前端排序
        multiSort:false, // 多行排序，指定爲false ，表示各行的排序不互相影響，要不然會根據第一行排序後的結果再排序
        pageSize: 30,//每頁顯示的記錄條數，默認爲10
        pageList: [30, 45, 60,75,90],//可以設置每頁記錄條數的列表 
        columns : [ [ {
            field : 'ROW_ID',
            title : 'UNID',
            width : 160,
            align : 'center',
            hidden : true //隱藏列，不顯示出來，但是可以取到值哦
        }, {
            field : 'SUB_TYPE', //這個字段就是和數據庫裏取出的字段一樣的，要不然不會顯示
            title : '執行查詢對象',  //這個是表上顯示的中文
            width : 160,              //列寬度
            align : 'center'          //居中顯示
        }, {
            field : 'SSUB_TYPE',
            title : '巡查事項分類',
            width : 160,
            align : 'center'
        }, {
            field : 'EK_DESC',
            title : '巡查事項',
            width : 380,
            align : 'center'
        }, {
            field : 'ACTCOUNT',
            title : '到店巡查總次數',
            width : 160,
            align : 'center',
            sortable:true
        }, {
            field : 'QSCOUNT',
            title : '問題次數',
            width : 120,
            align : 'center',
            sortable:true
        }, {
            field : 'QSPRO',
            title : '問題佔比（%）',
            width : 120,
            align : 'center',
            sortable:true   //這就是指定這一列可以排序啦
        }, {
            field : 'REQCOUNT',
            title : '未處理問題數',
            width : 120,
            align : 'center',
            sortable:true
        }, {
            field : 'REQPRO',
            title : '問題未處理率（%）',
            width : 130,
            align : 'center',
            sortable:true
        } ] ]
      });


// 表格初始化後 ，就是加載數據了 ，當然ajax 用起來 ，這裏url上寫個
<%=basePath%> 代表項目的路徑  如果是單獨的js文件的話 則要這樣取得項目路徑$("base").attr("href")
 //去後臺查詢數據
         function gobehind(type){
              //這裏一定要注意了，如果沒有先執行取消提示，在第二次查詢表格或者更新表格的時候，就不會再提示了
             $('#tt').datagrid('cancelCellTip');  
           
             $.ajax({
                    type: "POST",
                    url:  +"/servlet/GetBranchCompanyStoreReport",
                    dataType: "json",
                    data:{startDate: startDate,
                          endDate:endDate,
                          typeid:typeid,
                          scode:type,
                          excutor:excutor
                          },
                    success: function(data) {
                   
                   // $("#tt").datagrid('loadData', data[0]);
                      //分頁展示數據
                      $('#tt').datagrid({loadFilter:pagerFilter}).datagrid('loadData', data[0]);
                      //鼠標移動到單元格提示單元格內容
                     
                      $('#tt').datagrid('doCellTip',{'padding':'5px','delay':500}); 
                    }, error: function(error) {
                       //調用後臺失敗
                      alert(error);
                     
                    }
                });
             
             
         }



 這裏面就有了分頁的內容，分頁分兩種分頁，一種是從後臺查詢的時候就是根據分頁後來查詢的效果
一種是，後臺全部取出數據，返回給前臺，由前臺來自己分頁展示，這裏使用第二種。


 //前臺分頁，後臺已經把數據全部取出
         function pagerFilter(data){
            if (typeof data.length == 'number' && typeof data.splice == 'function'){    // 判斷數據是否是數組
                data = {
                    total: data.length,
                    rows: data
                };
            }
            var dg = $(this);
            var opts = dg.datagrid('options');
            var pager = dg.datagrid('getPager');
            pager.pagination({
                onSelectPage:function(pageNum, pageSize){
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination('refresh',{
                        pageNumber:pageNum,
                        pageSize:pageSize
                    });
                    dg.datagrid('loadData',data);
                }
            });
            if (!data.originalRows){
                data.originalRows = (data.rows);
            }
            var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
            return data;
        }

//就這樣分頁效果也做出來了 ，但是還是有點不完美，因爲數據表中，如果單元格內容很多，不能全部顯示怎麼辦？ 於是有一個功能是，當鼠標移動到單元格的時候，出現提示信息，把該單元格的內容全部提示在鼠標旁邊，讓用戶一目瞭然。

  //擴展的數據表格 單元格提示功能
    $.extend($.fn.datagrid.methods, {  
    /**
     * 開打提示功能 
     * @param {} jq 
     * @param {} params 提示消息框的樣式 
     * @return {} 
    */ 
   doCellTip : function(jq, params) {  
       function showTip(data, td, e) {  
           if ($(td).text() == "")  
               return;  
           data.tooltip.text($(td).text()).css({  
                       top : (e.pageY + 10) + 'px',  
                       left : (e.pageX + 20) + 'px',  
                       'z-index' : $.fn.window.defaults.zIndex,  
                       display : 'block'  
                   });  
       };  
       return jq.each(function() {  
           var grid = $(this);  
           var options = $(this).data('datagrid');  
           if (!options.tooltip) {  
               var panel = grid.datagrid('getPanel').panel('panel');  
               var defaultCls = {  
                   'border' : '1px solid #333',  
                   'padding' : '2px',  
                   'color' : '#333',  
                   'background' : '#F0F8FF',  
                   'position' : 'absolute',  
                   'max-width' : '300px',  
                   'border-radius' : '4px',  
                   '-moz-border-radius' : '4px',  
                   '-webkit-border-radius' : '4px',  
                   'display' : 'none'  
               };  
               var tooltip = $("<div id='celltip'></div>").appendTo('body');  
               tooltip.css($.extend({}, defaultCls, params.cls));  
               options.tooltip = tooltip;  
               panel.find('.datagrid-body').each(function() {  
                   var delegateEle = $(this).find('> div.datagrid-body-inner').length  
                           ? $(this).find('> div.datagrid-body-inner')[0]  
                           : this;  
                   $(delegateEle).undelegate('td', 'mouseover').undelegate(  
                           'td', 'mouseout').undelegate('td', 'mousemove')  
                           .delegate('td', {  
                               'mouseover' : function(e) {  
                                   if (params.delay) {  
                                       if (options.tipDelayTime)  
                                           clearTimeout(options.tipDelayTime);  
                                       var that = this;  
                                       options.tipDelayTime = setTimeout(  
                                               function() {  
                                                   showTip(options, that, e);  
                                               }, params.delay);  
                                   } else {  
                                       showTip(options, this, e);  
                                   }  
 
                               },  
                               'mouseout' : function(e) {  
                                   if (options.tipDelayTime)  
                                       clearTimeout(options.tipDelayTime);  
                                   options.tooltip.css({  
                                               'display' : 'none'  
                                           });  
                               },  
                               'mousemove' : function(e) {  
                                   var that = this;  
                                   if (options.tipDelayTime) {  
                                       clearTimeout(options.tipDelayTime);  
                                       options.tipDelayTime = setTimeout(  
                                               function() {  
                                                   showTip(options, that, e);  
                                               }, params.delay);  
                                   } else {  
                                       showTip(options, that, e);  
                                   }  
                               }  
                           });  
               });  
 
           }  
 
       });  
   },  
   /**
    * 關閉消息提示功能 
    * @param {} jq 
    * @return {} 
    */ 
   cancelCellTip : function(jq) {  
       return jq.each(function() {  
                   var data = $(this).data('datagrid');  
                   if (data.tooltip) {  
                       data.tooltip.remove();  
                       data.tooltip = null;  
                        var panel = $(this).datagrid('getPanel').panel('panel');  
                        panel.find('.datagrid-body').undelegate('td',  
                                'mouseover').undelegate('td', 'mouseout')  
                                .undelegate('td', 'mousemove');
                    }  
                    if (data.tipDelayTime) {  
                        clearTimeout(data.tipDelayTime);  
                        data.tipDelayTime = null;  
                    }  
                });  
    }  
});

做了上面這些功能的過程中，也是遇到了各種問題，各種調試 ，當然最大的幫手就是百度啦，百度一下，你就知道。
最最有用的當然是API ，看一下API提供了哪些方法，再去百度一下這些方法的使用方式，就很容易做出自己想要的效果。 還沒完呢，難度總是一點點加大的嘛，接下來是combobox聯動，也就是點擊一個combobox選擇內容後，第二個或者第三個Combobox的內容也跟着改變。上代碼：

           //下拉框 聯動  
              var _zhbid = $('#area').combobox({
                 disabled: true, //這是設置這個下拉框不可用
                 valueField: 'id',
                 textField: 'text'
             });
            
              var _bCompany = $('#bCompany').combobox({
                 editable: false,
                 valueField: 'id',
                 textField: 'text',
                 onSelect: function (record) {  
                //這裏就是關鍵了，第一個下拉框的onSelect 事件裏觸發第二個下拉框的數據加載，這樣就實現了數據關聯
                     _zhbid.combobox({
                         disabled: false,
                         url: $("base").attr("href")+"/servlet/GetAreaName?crid="+record.id,
                         valueField: 'id',
                         textField: 'text',
                     }).combobox('clear');

                     $('#area').combobox('setValue',"--請選擇--"); //這是下拉框的設置默認值
                    
                 }
             });
  
   這個高大上的聯動就被搞定了，麼麼噠！ 再來點小點心，數據驗證：

    //日期驗證
            if(startDate==""){
               $.messager.confirm('系統提示', '開始日期不能爲空！',null );
               return;
            }
 
到此爲止，前端的重點和難點都解決了！ 剩下的就是後臺接口的開發了，後臺的難點就是取到數據後的封裝，因爲前臺需要的是json格式的數據，所以，上代碼：
JSONArray array = new JSONArray();
for(int i=0;i<list.size();i++){
            HashMap<String,Object> map=(HashMap<String, Object>) list.get(i);
            String id=(String) map.get("id");
            String s=(String) map.get("text");
            String[] arr=s.split(" ");
            JSONObject json = new JSONObject();  //使用 JSONObject 來設置內容
             json.put("id", id);
            json.put("text", arr[0]);
            array.add(json);  // JSONArray來返回到前臺
        }  
 
後臺調試經常需要輸出點什麼東西來調試代碼，我以前都是用sysem.out.println(); 但是有個缺點，就是不能看清楚是哪裏打印輸出，於是大神們建議我使用log來打印輸出，log.info("嘻嘻嘻"+data);這樣子！ 但是前提是要先聲明log,
private static final Logger log = Logger.getLogger(GetBranchCompanyName.class); 參數就是這個類的類名稱。

這裏還有一個注意點，就是亂碼問題，所以，servlet裏面要設置編碼，代碼如下：
response.setContentType("application/json;charset=utf-8");//返回的格式是json，字符集是utf-8

到這裏， 這個功能就算完美結束啦！ 好開鮮，好開鮮！