当前位置：首页 > 蓝桥软件学院使用可编辑数据表格实现CRUD(Editable DataGrid)-
http://xueyuan.lanqiao.org
25.
1. $(function(){ 2. $(\).edatagrid({ 3. url:'../dist/data/datagrid_data.json', 4. title:'Load Data',//标题 5. idField:'id', 6. iconCls:'icon-save',//标题左边的图标 7. fitColumns:true,//固定列 8. rownumbers:true,//显示行号 9. showFooter:true,//显示行脚 10. pagination:true, 11. toolbar:'#tb',//定义工具栏 12. singleSelect:true, 13. onHeaderContextMenu: function(e, field){ //设置语境菜单 可以动态控制显示那些列不显示那些列 14. e.preventDefault(); 15. if (!cmenu){ 16. createColumnMenu(); 17. } 18. cmenu.menu('show', { 19. left:e.pageX, 20. top:e.pageY 21. }); 22. } 23. }); 24. }); 25. /** 26. 语境菜单开始 27. */ 28. var cmenu; 29. function createColumnMenu(){ 30. cmenu = $('
').appendTo('body'); 31. cmenu.menu({ 32. onClick: function(item){ 33. if (item.iconCls == 'icon-ok'){ 34. $('#tt').datagrid('hideColumn', item.name); 35. cmenu.menu('setIcon', { 36. target: item.target, 37. iconCls: 'icon-empty' 38. }); 39. } else { 40. $('#tt').datagrid('showColumn', item.name); http://xueyuan.lanqiao.org41. cmenu.menu('setIcon', { 42. target: item.target, 43. iconCls: 'icon-ok' 44. }); 45. } 46. } 47. }); 48. var fields = $('#tt').datagrid('getColumnFields'); 49. for(var i=0; i 效果如下： http://xueyuan.lanqiao.org Tip:语境菜单如上图所示。右键单击某一列的标题，会出现如下菜单，可以动态控制显示哪些列。 参考代码:31/datagrid05.html 综上所述，便是使用可编辑数据表格实现CRUD。 本文来源：蓝桥软件学院 搜索更多关于： 蓝桥软件学院使用可编辑数据表格实现CRUD(Editable 的文档
本文作者：...共分享92篇相关文档
