您的位置:首页 > 产品设计 > UI/UE

EasyUI datagrid添加右键菜单项

2014-10-24 10:49 204 查看
js代码

//动态加载数据表格
function InitData() {
$('#grid').datagrid({
url: '/Home/Query?r=' + Math.random(), //数据接收URL地址
method: 'GET',
iconCls: 'icon-view', //图标
fit: false, //自动适屏功能
nowrap: true,
autoRowHeight: false, //自动行高
autoRowWidth: true,
striped: true,
collapsible: false,
remoteSort: true,
idField: 'id', //主键值
pagination: true, //启用分页
pageSize: 20,
pageList: [10, 20, 50, 100, 500, 1000],
rownumbers: false, //显示行号
multiSort: true, //启用排序
sortable: true, //启用排序列
fitcolumns: true,
queryParams: $("#searchform").form2json(), //搜索条件查询
singleSelect: true,
loadMsg: '数据加载中,请稍后...',
toolbar: '#divtoolbar',
onRowContextMenu: onRowContextMenu, //右键。[表头(tab)右键onHeaderContextMenu,树形(tree)右键onContextMenu]
onHeaderContextMenu: function(e, field) { //表头右键。选择要显示的列
e.preventDefault();
if (!cmenu) {
createColumnMenu();
}
cmenu.menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
}

var cmenu;
//表头右键菜单
function createColumnMenu() {
cmenu = $('<div/>').appendTo('body');
cmenu.menu({
onClick: function(item) {
if (item.iconCls == 'icon-ok') {
$('#grid').datagrid('hideColumn', item.name);
cmenu.menu('setIcon', {
target: item.target,
iconCls: 'icon-empty'
});
} else {
$('#grid').datagrid('showColumn', item.name);
cmenu.menu('setIcon', {
target: item.target,
iconCls: 'icon-ok'
});
}
}
});
var fields = $('#grid').datagrid('getColumnFields');
for (var i = 0; i < fields.length; i++) {
var field = fields[i];
var col = $('#grid').datagrid('getColumnOption', field);
cmenu.menu('appendItem', {
text: col.title,
name: field,
iconCls: 'icon-ok'
});
}
}

//添加右击菜单内容
function onRowContextMenu(e, rowIndex, rowData) {
e.preventDefault();
$(this).datagrid('selectRow', rowIndex); //选中当前行
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
}


html代码

<div id="mm" class="easyui-menu" style="width: 100px;">
<div onclick="add()" data-options="iconCls:'icon-add'">添加</div>
<div onclick="print()" data-options="iconCls:'icon-print'">打印</div>
<div onclick="reload()" data-options="iconCls:'icon-reload'">刷新</div>
@*<div class="menu-sep"></div>*@ //分割线
</div>


至此大功初成。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: