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

首先定义变量

 

复制代码
代码 
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 删除方法

好，把带方法的插件路径的代码贴上来吧

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
// 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}
                                                        ]]
                                     }
                                  );

        });
复制代码

 

 

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

 

posted @   skyme  阅读(4346)  评论(6)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae