EasyUI datagrid添加右键菜单项
2014-10-24 10:49
204 查看
js代码
html代码
至此大功初成。
//动态加载数据表格 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>
至此大功初成。
相关文章推荐
- easyui datagrid 实现表头灵活展示(添加表头菜单,右键表头进行展示或隐藏)
- 在Flex中给datagrid添加右键菜单项的具体实现
- 在Flex中给datagrid添加右键菜单项
- easyui datagrid中添加右键菜单事件
- easyui datagrid中添加右键菜单事件
- 04.手把手教你 .Net EasyUI DataGrid(弹框式添加数据)
- silverlight中对datagrid添加右键菜单的注意事项。
- VSTO 为Office已有右键菜单添加自己的菜单项(word,Excel)
- 在IE右键菜单中添加菜单项
- 如何在IE右键菜单中添加菜单项(转)
- easyui dataGrid 动态添加列
- easyui-datagrid删除行,添加行
- Easyui的datagrid的行编辑器Editor中添加事件(修改某个单元格带出其他单元格的值)
- easyui datagrid 每条数据后添加操作按钮
- 添加鼠标右键菜单项(EditPlus为例)
- Windows下给鼠标右键菜单添加获得完全控制权限的菜单项
- 扩展easyui.datagrid,添加数据loading遮罩
- 为jQuery-easyui的tab组件添加右键菜单功能的简单实例
- 使用easyUI 添加toolbar到datagrid
- 【项目经验】--EasyUI DataGrid之右键菜单