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中增加如下代码（如图）
代码：
//
点击日期控件显示年月
function
initDateBox(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) {
var
month=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) 修改后的效果（如图）