文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>使用jquery-easyui写的CRUD插件(2)

使用jquery-easyui写的CRUD插件(2)

时间:2010-10-13  来源:skyme

首先定义变量

 

代码
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;//是否分页

然后添加方法

主要有以下几个方法:

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,
                                                                                                                
                                                                                
                                                                                
                                                                                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;">
<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文件就是,在后面我会继续加入与后台通信的代码来完善整个工程。

 

相关阅读 更多 +
排行榜 更多 +
辰域智控app

辰域智控app

系统工具 下载
网医联盟app

网医联盟app

运动健身 下载
汇丰汇选App

汇丰汇选App

金融理财 下载