1 var createGridHeaderContextMenu = function(e, field) {
2 e.preventDefault();
3 var grid = $(this);/* grid本身 */
4 var headerContextMenu = this.headerContextMenu;/* grid上的列头菜单对象 */
5 if (!headerContextMenu) {
6 var tmenu = $('<div style="width:100px;"></div>').appendTo('body');
7 var asc = $('<div iconCls="icon-asc" field="asc">升序</div>').appendTo(tmenu);
8 var desc = $('<div iconCls="icon-desc" field="desc">降序</div>').appendTo(tmenu);
9 var filedHTML = $('<div iconCls="icon-columns"></div>');
10 var span = $('<span>显示列/隐藏列</span>');
11 var spdiv = $('<div></div>');
12 var fields = grid.datagrid('getColumnFields');
13 for ( var i = 0; i < fields.length; i++) {
14 var fildOption = grid.datagrid('getColumnOption', fields[i]);
15 if (!fildOption.hidden) {
16 $('<div iconCls="icon-checked" field="' + fields[i] + '"/>').html(fildOption.title).appendTo(spdiv);
17 } else {
18 $('<div iconCls="icon-unchecked" field="' + fields[i] + '"/>').html(fildOption.title).appendTo(spdiv);
19 }
20 }
21 span.appendTo(filedHTML);
22 spdiv.appendTo(filedHTML);
23 filedHTML.appendTo(tmenu);
24 headerContextMenu = this.headerContextMenu = tmenu.menu({
25 onClick : function(item) {
26 var f = $(this).attr('field')
27 var fieldProperty = $(item.target).attr('field');
28 if (item.iconCls == 'icon-checked') {
29 grid.datagrid('hideColumn', fieldProperty);
30 $(this).menu('setIcon', {
31 target : item.target,
32 iconCls : 'icon-unchecked'
33 });
34 }
35 if (item.iconCls == 'icon-unchecked') {
36 grid.datagrid('showColumn', fieldProperty);
37 $(this).menu('setIcon', {
38 target : item.target,
39 iconCls : 'icon-checked'
40 });
41 }
42 if (item.iconCls == 'icon-asc') {
43 var options = grid.datagrid('options');
44 options.sortName = f;
45 options.sortOrder =fieldProperty;
46 grid.datagrid('reload');
47 }
48 if (item.iconCls == 'icon-desc') {
49 var options = grid.datagrid('options');
50 options.sortName = f;
51 options.sortOrder =fieldProperty;
52 grid.datagrid('reload');
53 }
54 }
55 });
56 }
57 headerContextMenu.attr('field',field);
58 headerContextMenu.menu('show', {
59 left : e.pageX,
60 top : e.pageY
61 });
62 };
63 $.fn.datagrid.defaults.onHeaderContextMenu = createGridHeaderContextMenu;
64 $.fn.treegrid.defaults.onHeaderContextMenu = createGridHeaderContextMenu;
