• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

asp.netEasyUIDataGrid实现增删改查

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前台代码:

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5     <title></title>
  6 
  7      <link rel="stylesheet" type="text/css" href="../EasyUI/themes/default/easyui.css" />
  8     <link rel="stylesheet" type="text/css" href="../EasyUI/themes/icon.css" />
  9     <link rel="stylesheet" type="text/css" href="../demo.css" />
 10     <style type="text/css">
 11 .align-center{
 12     margin:0 auto;        /* 居中 这个是必须的,,其它的属性非必须 */
 13     width:100%;        /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
 14     
 15     height:300px;
 16     text-align:center;     /* 文字等内容居中 */
 17 }
 18 </style>
 19     <script type="text/javascript" src="../EasyUI/jquery.min.js"></script>
 20     <script type="text/javascript" src="../EasyUI/jquery.easyui.min.js"></script>
 21        <script type="text/javascript">
 22 
 23            var url; //提交数据的路径
 24            var formId; //当天要提交的Form的编号
 25            var dialogId; //对话框的编号
 26 
 27           
 28 
 29 
 30            $(function () {
 31              
 32 
 33                $('#ReceiveList').datagrid({
 34                    toolbar: [{
 35                        //iconCls: 'icon-remove',
 36                        iconCls: 'icon-cut',
 37                        handler: function () { deleteAdminUser(); }
 38                    }, '-', {
 39                        iconCls: 'icon-edit',
 40                        handler: function () { edittbUser(); }
 41                    }, '-', {
 42                        iconCls: 'icon-add',
 43                        handler: function () { addtbUser(); }
 44                    }
 45 
 46                    ]
 47                });
 48 
 49 
 50 
 51 
 52            });
 53 
 54 
 55            function pagerFilter(data) {
 56                if (typeof data.length == 'number' && typeof data.splice == 'function') {    // is array
 57                    data = {
 58                        total: data.length,
 59                        rows: data
 60                    }
 61                }
 62                var dg = $('#ReceiveList');
 63                var opts = dg.datagrid('options');
 64                var pager = dg.datagrid('getPager');
 65                pager.pagination({
 66                   // pageSize: 10,//每页显示的记录条数,默认为10  
 67                   // pageList: [5, 10, 15],//可以设置每页记录条数的列表  
 68                    beforePageText: '',//页数文本框前显示的汉字  
 69                    afterPageText: '页    共 {pages} 页',
 70                    displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
 71                    onSelectPage: function (pageNum, pageSize) {
 72                        opts.pageNumber = pageNum;
 73                        opts.pageSize = pageSize;
 74                        pager.pagination('refresh', {
 75                            pageNumber: pageNum,
 76                            pageSize: pageSize
 77                        });
 78                        dg.datagrid('loadData', data);
 79                    }
 80                });
 81                if (!data.originalRows) {
 82                    data.originalRows = (data.rows);
 83                }
 84                var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
 85                var end = start + parseInt(opts.pageSize);
 86                data.rows = (data.originalRows.slice(start, end));
 87                return data;
 88            }
 89 
 90            $(function () {
 91                $('#ReceiveList').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', '/ashx/RoleList.ashx?action=GetRoleList');
 92            });
 93 
 94 
 95 
 96 
 97 
 98            //  删除代码部分
 99            function deleteAdminUser() {
100                var row = $('#ReceiveList').datagrid('getSelected');
101                if (row) {
102                    $.messager.confirm('删除提示', '确定要删除' + row.UserName + '', function (r) {
103                        if (r) {
104                            $.post('/ashx/RoleList.ashx', { id: row.UserID, action: 'deleteRole' }, function (data, status) {
105 
106                                if (data == "ok") {
107                                    $.messager.show({
108                                        title: 'success',
109                                        msg: '删除成功!'
110                                    });
111                                    $('#ReceiveList').datagrid('reload');
112                                   
113 
114                                } else {
115                                    $.messager.show({
116                                        title: 'Error',
117                                        msg: '删除用户失败!'
118                                    });
119                                }
120                            });
121                        }
122                    });
123                }
124                else {
125                    //$.messager.show({
126                    //    title: 'Error',
127                    //    msg: '你没有选中行!'
128                    //});
129                    $.messager.alert("提示", "您没有选中任何行!");
130                }
131            }
132            //添加
133            function addtbUser() {
134                $("#addtbUserDialog").dialog({
135                    "title": "新添用户",
136                    width: 500,
137                    height: 450
138 
139                });
140                $('#addtbUserDialog').dialog('open');
141                $('#addForm').form('clear');
142 
143                url = '/ashx/RoleList.ashx?action=add';
144                formId = "#addForm";
145                dialogId = "#addtbUserDialog";
146            }
147 
148            function add() {
149 
150                $(formId).form('submit', {
151                    url: url,
152                    onSubmit: function () {
153 
154                        return $(this).form('validate');
155                    },
156 
157                    success: function (data) {
158 
159 
160                        if (data == 'ok') {
161                            $.messager.show({
162                                title: 'success',
163                                msg: '插入成功!'
164                            });
165                            // $(dialogId).dialog('close');
166                            $('#ReceiveList').datagrid('reload');
167                        } else {
168                            $.messager.show({
169                                title: 'Error',
170                                msg: '插入失败!'
171                            });
172                        }
173 
174                        //$(dialogId).dialog('close');
175                        $('#ReceiveList').datagrid('reload');
176                    }
177                });
178            }
179            //编辑
180            function edittbUser() {
181                $("#edittbUserDialog").dialog({
182                    "title": "修改信息",
183                    width: 500,
184                    height: 450
185 
186                });
187                var row = $('#ReceiveList').datagrid('getSelected');
188                if (row) {
189                    $('#edittbUserDialog').dialog('open');
190                    $("#editUserName").val(row.UserName);
191                    $("#editUserPassword").val(row.UserPassword);
192                    $("#editNickName").val(row.NickName);
193                    $("#editDeptID").val(row.DeptID);
194                    $("#editPhone").val(row.Phone);
195                  
196                    //  $("#UserID").combobox('setValue', row.UserID);
197                    //   $('#edit').form('clear');
198 
199                    url = '/ashx/RoleList.ashx?action=edit&UserID=' + row.UserID;
200                    formId = "#editForm";
201                    dialogId = "#edittbUserDialog";
202 
203 
204                }
205                else {
206                    $.messager.alert("提示", "您没有选中任何行!");
207                }
208            }
209 
210            function edit() {
211 
212                $(formId).form('submit', {
213                    url: url,
214                    onSubmit: function () {
215                        // alert(formId);
216                        return $(this).form('validate');
217                    
218                    },
219                    // success: successCallback
220                    success: function (data) {
221                        //alert(data)
222                        //$.messager.show({
223                        //    title: 'success',
224                        //    msg: data
225                        //});
226 
227 
228                        //$.messager.alert("提示", data);
229 
230                        if (data == 'ok') {
231                            $.messager.show({
232                                title: 'success',
233                                msg: '修改成功!'
234                            });
235                            $(dialogId).dialog('close');
236                            $('#ReceiveList').datagrid('reload');
237                        } else {
238                            $.messager.show({
239                                title: 'Error',
240                                msg: '修改失败!'
241                            });
242                        }
243 
244                        //$(dialogId).dialog('close');
245                        $('#ReceiveList').datagrid('reload');
246                    }
247                });
248 
249 
250                //$.post('/ashx/RoleList.ashx', {action:'edit',UserID:UserID, UserName: UserID, UserPassword: UserID }, function (data, status) {
251 
252                //    if (data == "ok") {
253                //        $('#ReceiveList').datagrid('reload');
254                //    } else {
255                //        $.messager.show({
256                //            title: 'Error',
257                //            msg: '删除该科室失败!'
258                //        });
259                //    }
260                //});
261            }
262 
263            //多条件查询方法
264            function tsearch() {
265               //  var hoistalName = $("#hoistalName").combobox("getValue");
266                var UserID = $("#UserID").val();
267                //alert(depName);
268                $('#ReceiveList').datagrid('options').pageNumber = 1;
269                $('#ReceiveList').datagrid('getPager').pagination({ pageNumber: 1 });
270                $('#ReceiveList').datagrid('options').url = '/ashx/RoleList.ashx?action=search&UserID='+UserID;
271                $('#ReceiveList').datagrid("reload");
272            }
273     </script>
274 
275 </head>
276 <body>
277    <br/>
278       <div class="searchitem">
279     <label>UserID:</label>
280     <input type="text" id="UserID" class="easyui-validatebox" />
281           <a href="#" class="easyui-linkbutton" onclick="tsearch()" >查询</a>
282     </div>
283  
284  <table id="ReceiveList" title="Custom DataGrid Pager" style="width:700px;height:400px"
285             data-options="rownumbers:true,singleSelect:true,pagination:true,url:'/ashx/RoleList.ashx?action=GetRoleList',method:'get',pageSize:10
286             ">
287         <thead>
288             <tr>
289                 <th data-options="field:'UserID',checkbox:true,width:80">用户ID</th>
290                 <th data-options="field:'UserName',width:100">用户名</th>
291                 <th data-options="field:'UserPassword',width:80,align:'right'">用户密码</th>
292                 <th data-options="field:'NickName',width:80,align:'right'">昵称</th>
293                 <th data-options="field:'DeptID',width:240">部门ID</th>
294                 <th data-options="field:'Phone',width:60,align:'center'">电话</th>
295             </tr>
296         </thead>
297     </table>
298 
299 
300           <div id="addtbUserDialog" class="easyui-dialog" closed="true" buttons="#addtbUser-buttons" style="padding:10px 20px"> 
301                <form id="addForm"  method="post">
302                    <table class="align-center">
303                        <tr>
304                            <td> 用户名</td>
305                            <td><input id="Text1"  name="UserName" class="easyui-validatebox" data-options="required:true" type="text"/></td>
306                        </tr>
307                         <tr>
308                            <td>用户密码</td>
309                            <td><input id="Password1" name="UserPassword"  class="easyui-validatebox" data-options="required:true" type="password"/></td>
310                        </tr>
311                         <tr>
312                            <td>昵称</td>
313                            <td><input id="Text2"  name="NickName" class="easyui-validatebox" data-options="required:true" type="text"/></td>
314                        </tr>
315                         <tr>
316                            <td>部门ID</td>
317                            <td><input id="Text3" name="DeptID"  class=" 
                       
                    
                    

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
一个简单的ASP.NETWebForm&quot;ModelBinder&quot;发布时间:2022-07-10
下一篇:
通用的自动完成功能 -Ajax + asp.net(转载)发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap