首先定義變量

代碼var options = jQuery.extend({},jQuery.fn.crudUIGrid.defaults, options);var addTypeName = options.addTypeName;//添加div的頁面的名稱，默認是type-windowvar formId = options.formId;//要操作的form的名稱var title = options.title;//標題var width = options.width;//寬var height = options.height;//高var gridurl = options.gridurl;//請求的url的地址var addurl = options.addurl;//保存是用的鏈接var loadurl = options.loadurl;//顯示load的鏈接var editurl = options.editurl;//更新使用的鏈接var delurl = options.delurl;//要刪除使用的鏈接var sortName = options.sortName;//要排序的列名稱var sortOrder = options.sortOrder;//排序的方式var remoteSort = options.remoteSort;//是否遠程排序var frozenColumns = options.frozenColumns;//合并列，顯示列var columns = options.columns;//列顯示var pagination = options.pagination;//是否分頁

然后添加方法

主要有以下幾個方法：

datagrid 列表方法

addWindow 添加方法

editWindow 修改方法

delWindow 刪除方法

好，把帶方法的插件路徑的代碼貼上來吧

// JavaScript Document // 為easyui增加的插件，方便CRUD的操作(function(jQuery){jQuery.fn.crudUIGrid=function(options){var options = jQuery.extend({},jQuery.fn.crudUIGrid.defaults, options);var addTypeName = options.addTypeName;//添加div的頁面的名稱，默認是type-windowvar formId = options.formId;//要操作的form的名稱var title = options.title;//標題var width = options.width;//寬var height = options.height;//高var gridurl = options.gridurl;//請求的url的地址var addurl = options.addurl;//保存是用的鏈接var loadurl = options.loadurl;//顯示load的鏈接var editurl = options.editurl;//更新使用的鏈接var delurl = options.delurl;//要刪除使用的鏈接var sortName = options.sortName;//要排序的列名稱var sortOrder = options.sortOrder;//排序的方式var remoteSort = options.remoteSort;//是否遠程排序var frozenColumns = options.frozenColumns;//合并列，顯示列var columns = options.columns;//列顯示var pagination = options.pagination;//是否分頁return this.each(function(){var win = $('#'+addTypeName+'').window({closed:true});var grid = jQuery(this);grid.datagrid({title:title,iconCls:'icon-save',width:width,height:height,nowrap: false,striped: true,url:gridurl,sortName: sortName,sortOrder: sortOrder,remoteSort: remoteSort,idField:'code',frozenColumns:frozenColumns,columns:columns,pagination:pagination,rownumbers:true,toolbar:[{id:'btnadd',text:'add',iconCls:'icon-add',handler:addWindow},{id:'btncut',text:'Cut',iconCls:'icon-cut',handler:editWindow},'-',{id:'btnsave',text:'Save',disabled:true,iconCls:'icon-save',handler:delWindow}]});grid.datagrid('getPanel').panel({collapsible:true});//添加方法function addWindow(){win.window('open');$('#'+formId+'').form('clear');$('#btn-save').unbind('click').removeAttr('onclick').click(function(){form.form('submit',{url:addurl,onSubmit:function(){},success:function(data){eval('data='+data);if (data.success){grid.datagrid('reload');win.window('close');} else {$.messager.alert('錯誤',data.msg,'error');}}});});}function editWindow(){var row = grid.datagrid('getSelected');if (row){win.window('open');$('#formId').form('load',loadurl+row.id);$('#btn-save').unbind('click').removeAttr('onclick').click(function(){form.form('submit',{url:editurl,onSubmit:function(){},success:function(data){eval('data='+data);if (data.success){grid.datagrid('reload');win.window('close');} else {$.messager.alert('錯誤',data.msg,'error');}}});});}else{$.messager.show({title:'警告', msg:'請先選擇要修改的記錄。'});}}function delWindow(){var ids = [];var rows = grid.datagrid('getSelections');if (rows!=''){for(var i=0;i<rows.length;i++){ids.push(rows[i].id);}ids.join(',');$.messager.confirm('提示信息', '您確認要刪除這幾條記錄嗎?', function(data){if(data){$.ajax({url: delurl+ids,type: 'GET',timeout: 1000,error: function(){$.messager.alert('錯誤','刪除失敗!','error');},success: function(data){eval('data='+data);if (data.success){grid.datagrid('reload');} else {$.messager.alert('錯誤',data.msg,'error');}}});}});}else{$.messager.show({title:'警告', msg:'請先選擇要刪除的記錄。'});}}});};jQuery.fn.crudUIGrid.defaults = {addTypeName : 'type-window',title : 'CRUD',pagination : true};})(jQuery);

OK,js插件代碼部分已經完成。

看調用部分的代碼

代碼var win = 'type-window';//添加部分代碼的div的名稱$('#test').crudUIGrid({addTypeName : win,gridurl : 'datagrid_data.json',addurl : '/idep_b/page/warning/newtype.do?method=save',loadurl : '/idep_b/page/warning/newtype.do?method=input&id=',editurl : '/idep_b/page/warning/newtype.do?method=save',delurl : '/idep_b/page/warning/newtype.do?method=delete&ids=',frozenColumns:[[{field:'ck',checkbox:true},{title:'code',field:'code',width:80,sortable:true}]],columns:[[{title:'Base Information',colspan:3},{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,formatter:function(value,rec){return '<span style="color:red">Edit Delete</span>';}}],[{field:'name',title:'Name',width:120},{field:'addr',title:'Address',width:120,rowspan:2,sortable:true,sorter:function(a,b,order){return (a>b?1:-1)*(order=='asc'?1:-1);}},{field:'col4',title:'Col41',width:150,rowspan:2}]]});});

以下是完整的前臺html代碼

代碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title><link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><script language="javascript" src="../jquery-1.4.2.min.js"></script><script language="javascript" src="../plug/jquery.easyui.min.js"></script><script language="javascript" src="../plug/locale/easyui-lang-zh_CN.js"></script><script language="javascript" src="../plug/jquery.uigrid.js"></script><script language="javascript">/**$(function(){$('#test').crudUIGrid({title:'學生信息',columns:[[{field:'name',title:'Name',width:120},{field:'addr',title:'Address',width:120,rowspan:2,sortable:true,sorter:function(a,b,order){return (a>b?1:-1)*(order=='asc'?1:-1);}},{field:'col4',title:'Col41',width:150,rowspan:2}]],});});*/$(function(){var win = 'type-window';//添加部分代碼的div的名稱$('#test').crudUIGrid({addTypeName : win,gridurl : 'datagrid_data.json',addurl : '/idep_b/page/warning/newtype.do?method=save',loadurl : '/idep_b/page/warning/newtype.do?method=input&id=',editurl : '/idep_b/page/warning/newtype.do?method=save',delurl : '/idep_b/page/warning/newtype.do?method=delete&ids=',frozenColumns:[[{field:'ck',checkbox:true},{title:'code',field:'code',width:80,sortable:true}]],columns:[[{title:'Base Information',colspan:3},{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,formatter:function(value,rec){return '<span style="color:red">Edit Delete</span>';}}],[{field:'name',title:'Name',width:120},{field:'addr',title:'Address',width:120,rowspan:2,sortable:true,sorter:function(a,b,order){return (a>b?1:-1)*(order=='asc'?1:-1);}},{field:'col4',title:'Col41',width:150,rowspan:2}]]});});function getSelected(){var selected = $('#test').datagrid('getSelected');if (selected){alert(selected.code+":"+selected.name+":"+selected.addr+":"+selected.col4);}}function getSelections(){var ids = [];var rows = $('#test').datagrid('getSelections');for(var i=0;i<rows.length;i++){ids.push(rows[i].code);}alert(ids.join(':'));}function clearSelections(){$('#test').datagrid('clearSelections');}function selectRow(){$('#test').datagrid('selectRow',2);}function selectRecord(){$('#test').datagrid('selectRecord','002');}function unselectRow(){$('#test').datagrid('unselectRow',2);}function mergeCells(){$('#test').datagrid('mergeCells',{index:2,field:'addr',rowspan:2,colspan:2});}//關閉窗體function closeWindow(){$('#type-window').window('close');}</script> </head><body><h1>CRUD表格</h1><div style="margin-bottom:10px;"><a href="#" onClick="resize()">resize</a><a href="#" onClick="getSelected()">getSelected</a><a href="#" onClick="getSelections()">getSelections</a><a href="#" onClick="clearSelections()">clearSelections</a><a href="#" onClick="selectRow()">selectRow</a><a href="#" onClick="selectRecord()">selectRecord</a><a href="#" onClick="unselectRow()">unselectRow</a><a href="#" onClick="mergeCells()">mergeCells</a></div><table id="test"></table><!--添加部分代碼--><div id="type-window" title="告警類型維護" style="width:600px;height:320px;"><div style="padding:0px 0px 0px 0px;"><table width="98%" border="1" bordercolor="#a8d1e7" class="masktable"><tr><th colspan="4" class="title"><div class="bgimg">告警類型</div></th></tr><tr><th>告警實體：</th><td class="input_bg"><font color="red">*</font></td></tr><tr><th>告警級別：</th><td class="input_bg"><font color="red">*</font></td></tr><tr><th>告警狀態：</th><td class="input_bg"><font color="red">*</font></td></tr><tr><th>告警閥值：</th><td class="input_bg"><font color="red">*</font></td></tr><tr><th>告警時間間隔：</th><td class="input_bg">（分鐘）</td></tr><tr><th>接收人員手機號：</th><td class="input_bg"><input type="button" class="btn-style-01" value="查詢" onClick="queryPersonName();"/></td></tr></table></div><div style="text-align:center;padding:5px;"><a href="javascript:void(0)" onclick="" id="btn-save" class="easyui-linkbutton" icon="icon-ok">保存</a><a href="javascript:void(0)" onClick="closeWindow()" id="btn-cancel" class="easyui-linkbutton" icon="icon-cancel">取消</a></div></div></body> </html>

因為這里上傳附件的大小有限，所以將程序的源代碼放到我的另一個博客的路徑下

如果想要源碼的話可以去下載。

http://lgstarzkhl.javaeye.com/admin/blogs/784141

下載后在html/t_4.html文件就是，在后面我會繼續加入與后臺通信的代碼來完善整個工程。

總結

以上是生活随笔為你收集整理的使用jquery-easyui写的CRUD插件(2)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。