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

到这里， 这个功能就算完美结束啦！ 好开鲜，好开鲜！