Context Menu on DataGrid
Right click on the header of DataGrid to display context menu.
实现如下效果:
源代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Context Menu on DataGrid - jQuery EasyUI Demo</title>
- <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
- <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
- <link rel="stylesheet" type="text/css" href="../demo.css">
- <script type="text/javascript" src="../../jquery.min.js"></script>
- <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
- </head>
- <body>
- <h2>Context Menu on DataGrid</h2>
- <p>Right click on the header of DataGrid to display context menu.</p>
- <div style="margin:20px 0;"></div>
- <table id="dg"></table>
- <script type="text/javascript">
- $(function(){
- $('#dg').datagrid({
- url: 'datagrid_data1.json',
- method: 'get',
- title: 'Context Menu on DataGrid',
- iconCls: 'icon-save',
- width: 700,
- height: 250,
- fitColumns: true,
- singleSelect: true,
- columns:[[
- {field:'itemid',title:'Item ID',width:80},
- {field:'productid',title:'Product ID',width:120},
- {field:'listprice',title:'List Price',width:80,align:'right'},
- {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
- {field:'attr1',title:'Attribute',width:250},
- {field:'status',title:'Status',width:60,align:'center'}
- ]],
- 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'){
- $('#dg').datagrid('hideColumn', item.name);
- cmenu.menu('setIcon', {
- target: item.target,
- iconCls: 'icon-empty'
- });
- } else {
- $('#dg').datagrid('showColumn', item.name);
- cmenu.menu('setIcon', {
- target: item.target,
- iconCls: 'icon-ok'
- });
- }
- }
- });
- var fields = $('#dg').datagrid('getColumnFields');
- for(var i=0; i<fields.length; i++){
- var field = fields[i];
- var col = $('#dg').datagrid('getColumnOption', field);
- cmenu.menu('appendItem', {
- text: col.title,
- name: field,
- iconCls: 'icon-ok'
- });
- }
- }
- </script>
- </body>
- </html>
补充:当使用了expandrow实现可以展开细节行的效果时候,灵活展示主表和细节表:
function formatOper(val,row){ return "<a id='sel' href='javascript:void(0)' class='easyui-linkbutton' οnclick=\"selectData('"+row.WJBH+"')\" style='color:blue'>查看</a> <a class='easyui-linkbutton' href=downSrc.action?WJBH="+row.WJBH+" style='color:blue'>下载</a>"; } function selectData(WJBH){ if(WJBH!=null){ $('#dlg').dialog({ title: '原数据展示', closed: false, cache: false, minimizable:true, maximizable: true, href: 'selectSrc.action?WJBH='+WJBH+'', modal: false }); }else{ $.messager.alert("提示","你查看的文件不存在"); } } function getTable(url) { $('#grid_table').datagrid({ url:url, view: detailview, columns :[[{title:'操作',field:'status',width:80,align:'center',formatter:formatOper}]], rownumbers:true, singleSelect:true, autoRowHeight:false, pagination:true, fitColumns:true, striped:true, fit:true, //用于字段动态隐藏或展示 onHeaderContextMenu: function(e, field){e.preventDefault();if (!cmenu){createColumnMenu();}cmenu.menu('show', {left:e.pageX, //pageX,pageY鼠标指针的位置,相当于文档的左边缘top:e.pageY});}, pageList:[10,15,20], pageSize:10, detailFormatter:function(index,row){ return '<div style="padding:3px"><table class="ddv'+index+'"></table></div>' + //输出结果子表1表格-段号或区域号 '<div style="padding:3px"><table class="ddt'+index+'"></table></div>'; //输出结果子表2表格-层号 }, onExpandRow: function(index,row){ // var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv'); var ddv = $('.ddv'+index); //子表1表格 //输出结果子表1 ddv.datagrid({ url:"selectSondata.action?WJBH="+row.WJBH, fitColumns:true, singleSelect:true, rownumbers:true, loadMsg:'', height:'auto', columns:[[ {field:'DHHQYH',title:'第一列',width:65,align:'center'}, {field:'AZS',title:'第二列',width:65,align:'center'}, {field:'KVA',title:'第三列',width:65,align:'center'}, {field:'ZJXL',title:'第四列',width:65,align:'center'}, {field:'ZZXL',title:'第五列',width:65,align:'center'}, {field:'TJSHMD',title:'第六列',width:65,align:'center'} ]], onHeaderContextMenu:function(e,field){ //点击表头时触发 e.preventDefault(); //阻止浏览器自带的右键菜单弹出 var ddvs = $("table[class*='ddv']");// alert(ddvs.length); if(!sonMenu_1){ createSonMenu_1(ddvs,index); } //设置子表1菜单的出现位置 sonMenu_1.menu('show',{ left:e.pageX, //在鼠标右键位置 top:e.pageY //在鼠标右键位置 }); }, onResize:function(){ $('#grid_table').datagrid('fixDetailRowHeight',index); }, onLoadSuccess:function(){ setTimeout(function(){ $('#grid_table').datagrid('fixDetailRowHeight',index); },0); } }); $('#grid_table').datagrid('fixDetailRowHeight',index); //如果是第一次展开表格,还没有生成menu,会出错 if(sonMenu_1 != null && sonMenu_1 != undefined){ //是在生成菜单后展开表格,根据menu里面的勾选情况进行子表展示 var fields = ddv.datagrid('getColumnFields'); for(var i=0; i<fields.length; i++){// if($('#'+fields[i]+' > div:eq(1)').attr("class").split(" ")[1] == 'icon-ok'){// ddv.datagrid('showColumn',fields[i]);// }else if($('#'+fields[i]+' > div:eq(1)').attr("class").split(" ")[1] == 'icon-empty'){// ddv.datagrid('hideColumn',fields[i]);// } //优化修改后的 var select1 = $('#sonMenu_1 > div[id="'+fields[i]+'"] > div:eq(1)').attr("class").split(" ")[1];// console.log($('#sonMenu_1 > div[id="'+fields[i]+'"] > div:eq(1)').attr("class").split(" ")[1]);// console.log(select1); if(select1 == 'icon-ok'){ ddv.datagrid('showColumn',fields[i]); }else if(select1 == 'icon-empty'){ ddv.datagrid('hideColumn',fields[i]); } } }else{ //是在生成菜单前展开表格,默认加载前6项内容 console.log("加载前6列"); var fields = ddv.datagrid('getColumnFields'); for(var i=0; i<fields.length; i++){ if(i < 6){ ddv.datagrid('showColumn',fields[i]); }else{ ddv.datagrid('hideColumn',fields[i]); } } } /* * -------------------------------以上为输出结果子表1相关------------------------------- * * ----------------------------------分界线-------------------------------------- * * -------------------------------以下为输出结果子表2相关------------------------------- * * */ var ddt = $('.ddt'+index); //子表2表格 //输出结果子表2 ddt.datagrid({ url:"selectSondata2.action?WJBH="+row.WJBH, fitColumns:true, singleSelect:true, rownumbers:true, loadMsg:'', height:'auto', columns:[[{field:'DHHQYH',title:'第一列',width:65,align:'center'}, {field:'AZS',title:'第二列',width:65,align:'center'}, {field:'KVA',title:'第三列',width:65,align:'center'}, {field:'ZJXL',title:'第四列',width:65,align:'center'}, {field:'ZZXL',title:'第五列',width:65,align:'center'}, {field:'TJSHMD',title:'第六列',width:65,align:'center'}.]], onHeaderContextMenu:function(e,field){ //点击表头时触发 e.preventDefault(); //阻止浏览器自带的右键菜单弹出 var ddts = $("table[class*='ddt']"); if(!sonMenu_2){ createSonMenu_2(ddts,index); } //设置子表1菜单的出现位置 sonMenu_2.menu('show',{ left:e.pageX, //在鼠标右键位置 top:e.pageY //在鼠标右键位置 }); }, onResize:function(){ $('#grid_table').datagrid('fixDetailRowHeight',index); }, onLoadSuccess:function(){ setTimeout(function(){ $('#grid_table').datagrid('fixDetailRowHeight',index); },0); } }); //如果是第一次展开表格,还没有生成menu,会出错 if(sonMenu_2 != null && sonMenu_2 != undefined){ //是在生成菜单后展开表格,根据menu里面的勾选情况进行子表展示 var fields = ddt.datagrid('getColumnFields'); for(var i=0; i<fields.length; i++){// if($('#'+fields[i]+' > div:eq(1)').attr("class").split(" ")[1] == 'icon-ok'){// ddt.datagrid('showColumn',fields[i]);// }else if($('#'+fields[i]+' > div:eq(1)').attr("class").split(" ")[1] == 'icon-empty'){// ddt.datagrid('hideColumn',fields[i]);// } //优化修改后的 var select = $('#sonMenu_2 > div[id="'+fields[i]+'"] > div:eq(1)').attr("class").split(" ")[1];// console.log($('#sonMenu_2 > div[id="'+fields[i]+'"] > div:eq(1)').attr("class").split(" ")[1]);// console.log(select); if(select == 'icon-ok'){ ddt.datagrid('showColumn',fields[i]); }else if(select == 'icon-empty'){ ddt.datagrid('hideColumn',fields[i]); } } }else{ //是在生成菜单前展开表格,默认加载前6项内容 console.log("加载前6列"); var fields = ddt.datagrid('getColumnFields'); for(var i=0; i<fields.length; i++){ if(i < 6){ ddt.datagrid('showColumn',fields[i]); }else{ ddt.datagrid('hideColumn',fields[i]); } } } }, //默认展开第一行数据// onLoadSuccess:function(){// var me = this;// setTimeout(function () {//延时触发easyui datagrid detailviewclick事件，不用计时器无法展开，不懂什么问题~// var ss=$(me).parent().find('span.datagrid-row-expander');// $(ss[0]).trigger('click');// }, 10);// } });//默认展示主表前5项数据和最后一项数据var fieldss = $('#grid_table').datagrid('getColumnFields');for(var j=0; j<fieldss.length; j++){if(j < 5 || j == fieldss.length - 1){$('#grid_table').datagrid("showColumn",fieldss[j]);}else{$('#grid_table').datagrid("hideColumn",fieldss[j]);}}//用于输出结果主表格根据用户选择进行动态展示或隐藏字段var cmenu;function createColumnMenu(){cmenu = $('<div/>').appendTo('body');cmenu.menu({onClick: function(item){//menu点击后执行的方法,添加对勾/取消对勾,显示列/隐藏列if (item.iconCls == 'icon-ok'){$('#grid_table').datagrid('hideColumn', item.name);cmenu.menu('setIcon', {target: item.target,iconCls: 'icon-empty'});} else {$('#grid_table').datagrid('showColumn', item.name);cmenu.menu('setIcon', {target: item.target,iconCls: 'icon-ok'});}}});//生成menu列表来展示var fields = $('#grid_table').datagrid('getColumnFields');for(var i=0; i<fields.length-1; i++){var field = fields[i];if(i < 5 || i == fieldss.length - 1){var col = $('#grid_table').datagrid('getColumnOption', field);cmenu.menu('appendItem', {text: col.title,name: field,iconCls: 'icon-ok'});}else{var col = $('#grid_table').datagrid('getColumnOption', field);cmenu.menu('appendItem', {text: col.title,name: field,iconCls: 'icon-empty'});}}}//输出结果子表1的动态隐藏/展示字段var sonMenu_1function createSonMenu_1(ddvs,index){sonMenu_1 = $('<div id="sonMenu_1"/>').appendTo('body');sonMenu_1.menu({//点击某一菜单项时触发onClick:function(item){console.log("设置图标");if(item.iconCls == 'icon-ok'){for(var i=0; i<ddvs.length; i++){if($(ddvs[i]).hasClass("datagrid-f")){ //是被展开的表格$(ddvs[i]).datagrid('hideColumn',item.id); //使用ddv则多个细节行独立展示/隐藏}}sonMenu_1.menu('setIcon',{target:item.target,iconCls:'icon-empty'});}else if(item.iconCls == 'icon-empty'){for(var i=0; i<ddvs.length; i++){if($(ddvs[i]).hasClass("datagrid-f")){$(ddvs[i]).datagrid('showColumn',item.id);}}sonMenu_1.menu('setIcon',{target:item.target,iconCls:'icon-ok'});}}});//加载menu的所有列表(仅在第一次右键时候生成,今后右键不同表格都使用同一个menu)var fields = $(ddvs[index]).datagrid('getColumnFields');// console.log("进来了");$.each(fields,function(i){if(i < 6){var column = $(ddvs[index]).datagrid('getColumnOption',fields[i]);sonMenu_1.menu('appendItem',{text:column.title,iconCls: 'icon-ok', id:fields[i]});}else{var column = $(ddvs[index]).datagrid('getColumnOption',fields[i]);sonMenu_1.menu('appendItem',{text:column.title,iconCls: 'icon-empty', id:fields[i]});}});}//输出结果子表2的动态隐藏/展示字段var sonMenu_2function createSonMenu_2(ddts,index){sonMenu_2 = $('<div id="sonMenu_2"/>').appendTo('body');sonMenu_2.menu({//点击某一菜单项时触发onClick:function(item){console.log("设置图标");if(item.iconCls == 'icon-ok'){for(var i=0; i<ddts.length; i++){if($(ddts[i]).hasClass("datagrid-f")){ //是被展开的表格$(ddts[i]).datagrid('hideColumn',item.id); //使用ddv则多个细节行独立展示/隐藏}}sonMenu_2.menu('setIcon',{target:item.target,iconCls:'icon-empty'});}else if(item.iconCls == 'icon-empty'){for(var i=0; i<ddts.length; i++){if($(ddts[i]).hasClass("datagrid-f")){$(ddts[i]).datagrid('showColumn',item.id);}}sonMenu_2.menu('setIcon',{target:item.target,iconCls:'icon-ok'});}}});//加载menu的所有列表(仅在第一次右键时候生成,今后右键不同表格都使用同一个menu)var fields = $(ddts[index]).datagrid('getColumnFields');// console.log("进来了");$.each(fields,function(i){if(i < 6){var column = $(ddts[index]).datagrid('getColumnOption',fields[i]);sonMenu_2.menu('appendItem',{text:column.title,iconCls: 'icon-ok', id:fields[i]});}else{var column = $(ddts[index]).datagrid('getColumnOption',fields[i]);sonMenu_2.menu('appendItem',{text:column.title,iconCls: 'icon-empty', id:fields[i]});}});}} function validateuuid(val){//验证uuid正则 /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{8,12}$/var patten = /\w*-\w*-\w*-\w*-\w*$/; return patten.test(val); } function validatedata(val){//验证数字加字母var patten =/^[0-9a-zA-Z-]{1,20}/; return patten.test(val); }function validateFloat(val){//验证小数 var patten = /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d{1,8})?$/; return patten.test(val); } function selectLike(){var flag=true;var a=$("#in1").val();if(!validateuuid(a)&&! validatedata(a)&&a!=""){flag=false;$.messager.alert("提示","请按(数字、字母、下划线)正确格式输入你要搜索的内容");return;}var b=$("#in2").val();if(!validateFloat(b)&&b!=""){flag=false;$.messager.alert("提示","请输入数字");$("#in2").focus();return;}var c=$("#in3").val();if(!validateFloat(c)&&c!=""){flag=false;$.messager.alert("提示","请输入数字");return;}var d=$("#in4").val();if(!validateFloat(d)&&d!=""){flag=false;$.messager.alert("提示","请输入数字");return;}var e=$("#in5").val();if(!validateFloat(e)&&e!=""){flag=false;$.messager.alert("提示","请输入数字");return;}var f=$("#in6").val();if(!validateFloat(f)&&f!=""){flag=false;$.messager.alert("提示","请输入数字");return;}//var g=$("#in22").val();if(!validateFloat(g)&&g!=""){flag=false;$.messager.alert("提示","请输入数字");$("#in22").focus();return;}var h=$("#in33").val();if(!validateFloat(h)&&h!=""){flag=false;$.messager.alert("提示","请输入数字");return;}var i=$("#in44").val();if(!validateFloat(i)&&i!=""){flag=false;$.messager.alert("提示","请输入数字");return;}var k=$("#in55").val();if(!validateFloat(k)&&k!=""){flag=false;$.messager.alert("提示","请输入数字");return;}var m=$("#in66").val();if(!validateFloat(m)&&m!=""){flag=false;$.messager.alert("提示","请输入数字");return;}if(b==""&&g!=""||b!=""&&g==""){flag=false;$.messager.alert("提示","请输入数字范围");return;}if(c==""&&h!=""||c!=""&&h==""){flag=false;$.messager.alert("提示","请输入数字范围");return;}if(d==""&&i!=""||d!=""&&i==""){flag=false;$.messager.alert("提示","请输入数字范围");return;}if(e==""&&k!=""||e!=""&&k==""){flag=false;$.messager.alert("提示","请输入数字范围");return;}if(f==""&&m!=""||f!=""&&m==""){flag=false;$.messager.alert("提示","请输入数字范围");return;}if(flag){var url="selectLike.action?wjbh="+a+"&yfl="+b+"&wlsh="+c+"&yyy="+d+"&sdd="+e+"&xdd="+f+" &yfl2="+g+"&wlsh2="+h+"&yyy2="+i+"&sdd2="+k+"&xdd2="+m+"";getTable(url);}}{field:'DHHQYH',title:'第一列',width:65,align:'center'}, {field:'AZS',title:'第二列',width:65,align:'center'}, {field:'KVA',title:'第三列',width:65,align:'center'}, {field:'ZJXL',title:'第四列',width:65,align:'center'}, {field:'ZZXL',title:'第五列',width:65,align:'center'}, {field:'TJSHMD',title:'第六列',width:65,align:'center'}
扫一扫
698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
