easyUI功能扩展

easyui功能完善

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

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

代码：

var td=$("<tdrowspan=\""+opts.frozenColumns.length+"\"><divclass=\"datagrid-header-rownumber\">序号</div></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 class="datagrid-empty"style="text-align:center;color:red;font-size:20px;">您好，目前系统没有查询到相应数据！</div>');
$('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 = $('<div id="handerMenu" style="width:100px;"></div>').appendTo('body');
var fields =grid.datagrid('getColumnFields');
for (
var i = 0; i <fields.length; 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) {
$('<div data-options="iconCls:\'icon-ok\'"field="' + fields[i] +
'"/>').html(fildOption.title).appendTo(tmenu);
} else {
$('<divdata-options="iconCls:\'icon-unchecked\'" field="' + fields[i] +
'"/>').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 class="datagrid-empty"style="text-align:center;color:red">您好，目前系统没有查询到相应的数据！</div>');
$('div.datagrid-wrap').find('div.datagrid-pager').hide();
}else{
$('div.datagrid-wrap').find('div.datagrid-pager').show();
}

}
});

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