easyUI功能扩展

    easyui功能完善

 

1.       在datagrid中首列标示“序号”二字

a)  修改jquery.easyui.min.js（如图）

代码：

var td=$("序号

");

b)  修改后的效果（如图）

2.      datagrid翻页，选中行还是会带着，在pub.js中增加如下方法。在查询和清空按钮上调用，可取消勾选当前页中的所有行。

    function removeSelected(){

       $('#dataTable').datagrid('uncheckAll');

    }

3.      没有数据时datagrid中显示“您好，目前系统没有查询到相应数据！”。这种方式是统一修改所有datagrid的方式，下边还有一种通过datagrid的view扩展的方式。

a)  修改jquery.easyui.min.js（如图）

代码：

//$.fn.datagrid.defaults.view.onAfterRender.call(this,_768);

var vc =$(_768).datagrid('getPanel').children('div.datagrid-view');

vc.next('div.datagrid-empty').remove();

if(!$(_768).datagrid('getRows').length){

    var d = vc.after('

您好，目前系统没有查询到相应数据！

');

    $('div.datagrid-wrap').find('div.datagrid-pager').hide();

}else{

     $('div.datagrid-wrap').find('div.datagrid-pager').show();

}

b)  修改后的效果（如图）

4.      Datagrid列头右键显示（隐藏）

a)  在pubInclude.jsp中增加如下代码（如图）

代码：

//easyUI扩展右键隐藏

var createGridHeaderContextMenu= function(e, field) {

   e.preventDefault();

    var grid = $(this);/* grid本身 */

    var headerContextMenu= this.headerContextMenu;/* grid上的列头菜单对象 */

    if(!headerContextMenu) {

        var tmenu = $('

').appendTo('body');

        var fields =grid.datagrid('getColumnFields');

        for ( var i = 0; i

            if(i>10){

                 $('#handerMenu').css("height", "310px");

                 $('#handerMenu').css("overflow-y","scroll");

             }else{

                 $('#handerMenu').css("height", "auto");

             }

            var fildOption =grid.datagrid('getColumnOption', fields[i]);

            if(!fildOption.hidden) {

                $('

'"/>').html(fildOption.title).appendTo(tmenu);

            } else {

                $(''"/>').html(fildOption.title).appendTo(tmenu);

            }

        }

       headerContextMenu = this.headerContextMenu = tmenu.menu({

            onClick: function(item) {

                var f = $(this).attr('field')

                var fieldProperty =$(item.target).attr('field');

                if (item.iconCls == 'icon-ok') {

                   grid.datagrid('hideColumn', fieldProperty);

                   $(this).menu('setIcon', {

                       target : item.target,

                       iconCls : 'icon-unchecked'

                   });

                }

                if (item.iconCls == 'icon-unchecked') {

                   grid.datagrid('showColumn', fieldProperty);

                   $(this).menu('setIcon', {

                       target : item.target,

                        iconCls : 'icon-ok'

                   });

                }

            }

        });

    }

   headerContextMenu.attr('field',field);

   headerContextMenu.menu('show', {

        left :e.pageX,

        top :e.pageY

    });

};

$.fn.datagrid.defaults.onHeaderContextMenu =createGridHeaderContextMenu;

$.fn.treegrid.defaults.onHeaderContextMenu =createGridHeaderContextMenu;

b)  修改后的效果（如图）

5.       databox扩展只能选择年月功能 ,使用时在页面jq初始化函数中调用initDateBox('yearMonth')即可;

a)  在pubInclude.jsp中增加如下代码（如图）

代码：

//点击日期控件显示年月

  functioninitDateBox(id){

       $('#'+id).datebox({

          onShowPanel: function () {//显示日趋选择对象后再触发弹出月份层的事件，初始化时没有生成月份层

              span.trigger('click'); //触发click事件弹出月份层

              if (!tds) setTimeout(function () {//延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔

                  tds = p.find('div.calendar-menu-month-inner td');

                  tds.click(function (e) {

                      e.stopPropagation(); //禁止冒泡执行easyui给月份绑定的事件

                      var year = /\d{4}/.exec(span.html())[0]//得到年份

                      , month = parseInt($(this).attr('abbr'), 10); //月份

                      if(month<10)month="0"+month;

                      $('#'+id).datebox('hidePanel')//隐藏日期对象

                      .datebox('setValue', year + '-' + month); //设置日期的值

                  });

              }, 0)

          },

          parser: function (s) {//配置parser，返回选择的日期

              if (!s) return new Date();

              var arr = s.split('-');

              return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);

          },

          formatter: function (d) {

                varmonth=d.getMonth()+1;

                if(month<10)month="0"+month;

              return d.getFullYear() + '-' +month ; }//配置formatter，只返回年月

      });

       var p = $('#'+id).datebox('panel'), //日期选择对象

      tds = false, //日期选择对象中月份

      span = p.find('span.calendar-text'); //显示月份层的触发控件

   }

b)  修改后的效果（如图）

6.       采用视图扩展方式， datagrid没有数据时显示“您好，目前系统没有查询到相应的数据！”，设置datagrid的view属性为myview即可。上边提供了一种全局修改方式。

a)  在pubInclude.jsp中增加如下代码（如图）

代码：

//增加没有记录的扩展view

var myview =$.extend({},$.fn.datagrid.defaults.view,{

    onAfterRender:function(target){

       $.fn.datagrid.defaults.view.onAfterRender.call(this,target);

        var opts =$(target).datagrid('options');

        var vc =$(target).datagrid('getPanel').children('div.datagrid-view');

        vc.next('div.datagrid-empty').remove();

        if(!$(target).datagrid('getRows').length){

            var d = vc.after('

您好，目前系统没有查询到相应的数据！

');

            $('div.datagrid-wrap').find('div.datagrid-pager').hide();

        }else{

        $('div.datagrid-wrap').find('div.datagrid-pager').show();

        }

       

    }

});

b)  修改后的效果（如图）