首先定义变量
代码
var
options
=
jQuery.extend({},jQuery.fn.crudUIGrid.defaults, options);
var addTypeName = options.addTypeName; // 添加div的页面的名称,默认是type-window
var 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; // 是否分页
var addTypeName = options.addTypeName; // 添加div的页面的名称,默认是type-window
var 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-window var 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 }
]]
}
);
});
$( ' #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>
< 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文件就是,在后面我会继续加入与后台通信的代码来完善整个工程。