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

asp.netEasyUIDataGrid实现增删改查

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

转自：http://www.cnblogs.com/create/p/3410314.html

前台代码：

<!DOCTYPE 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="../EasyUI/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../EasyUI/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="../demo.css" />
    <style type="text/css">
.align-center{
    margin:0 auto;        /* 居中 这个是必须的，，其它的属性非必须 */
    width:100%;        /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
    
    height:300px;
    text-align:center;     /* 文字等内容居中 */
}
</style>
    <script type="text/javascript" src="../EasyUI/jquery.min.js"></script>
    <script type="text/javascript" src="../EasyUI/jquery.easyui.min.js"></script>
       <script type="text/javascript">

           var url; //提交数据的路径
           var formId; //当天要提交的Form的编号
           var dialogId; //对话框的编号

          


           $(function () {
             

               $('#ReceiveList').datagrid({
                   toolbar: [{
                       //iconCls: 'icon-remove',
                       iconCls: 'icon-cut',
                       handler: function () { deleteAdminUser(); }
                   }, '-', {
                       iconCls: 'icon-edit',
                       handler: function () { edittbUser(); }
                   }, '-', {
                       iconCls: 'icon-add',
                       handler: function () { addtbUser(); }
                   }

                   ]
               });




           });


           function pagerFilter(data) {
               if (typeof data.length == 'number' && typeof data.splice == 'function') {    // is array
                   data = {
                       total: data.length,
                       rows: data
                   }
               }
               var dg = $('#ReceiveList');
               var opts = dg.datagrid('options');
               var pager = dg.datagrid('getPager');
               pager.pagination({
                  // pageSize: 10,//每页显示的记录条数，默认为10  
                  // pageList: [5, 10, 15],//可以设置每页记录条数的列表  
                   beforePageText: '第',//页数文本框前显示的汉字  
                   afterPageText: '页    共 {pages} 页',
                   displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
                   onSelectPage: function (pageNum, pageSize) {
                       opts.pageNumber = pageNum;
                       opts.pageSize = pageSize;
                       pager.pagination('refresh', {
                           pageNumber: pageNum,
                           pageSize: pageSize
                       });
                       dg.datagrid('loadData', data);
                   }
               });
               if (!data.originalRows) {
                   data.originalRows = (data.rows);
               }
               var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
               var end = start + parseInt(opts.pageSize);
               data.rows = (data.originalRows.slice(start, end));
               return data;
           }

           $(function () {
               $('#ReceiveList').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', '/ashx/RoleList.ashx?action=GetRoleList');
           });





           //  删除代码部分
           function deleteAdminUser() {
               var row = $('#ReceiveList').datagrid('getSelected');
               if (row) {
                   $.messager.confirm('删除提示', '确定要删除' + row.UserName + '吗', function (r) {
                       if (r) {
                           $.post('/ashx/RoleList.ashx', { id: row.UserID, action: 'deleteRole' }, function (data, status) {

                               if (data == "ok") {
                                   $.messager.show({
                                       title: 'success',
                                       msg: '删除成功！'
                                   });
                                   $('#ReceiveList').datagrid('reload');
                                  

                               } else {
                                   $.messager.show({
                                       title: 'Error',
                                       msg: '删除用户失败!'
                                   });
                               }
                           });
                       }
                   });
               }
               else {
                   //$.messager.show({
                   //    title: 'Error',
                   //    msg: '你没有选中行！'
                   //});
                   $.messager.alert("提示", "您没有选中任何行！");
               }
           }
           //添加
           function addtbUser() {
               $("#addtbUserDialog").dialog({
                   "title": "新添用户",
                   width: 500,
                   height: 450

               });
               $('#addtbUserDialog').dialog('open');
               $('#addForm').form('clear');

               url = '/ashx/RoleList.ashx?action=add';
               formId = "#addForm";
               dialogId = "#addtbUserDialog";
           }

           function add() {

               $(formId).form('submit', {
                   url: url,
                   onSubmit: function () {

                       return $(this).form('validate');
                   },

                   success: function (data) {


                       if (data == 'ok') {
                           $.messager.show({
                               title: 'success',
                               msg: '插入成功！'
                           });
                           // $(dialogId).dialog('close');
                           $('#ReceiveList').datagrid('reload');
                       } else {
                           $.messager.show({
                               title: 'Error',
                               msg: '插入失败！'
                           });
                       }

                       //$(dialogId).dialog('close');
                       $('#ReceiveList').datagrid('reload');
                   }
               });
           }
           //编辑
           function edittbUser() {
               $("#edittbUserDialog").dialog({
                   "title": "修改信息",
                   width: 500,
                   height: 450

               });
               var row = $('#ReceiveList').datagrid('getSelected');
               if (row) {
                   $('#edittbUserDialog').dialog('open');
                   $("#editUserName").val(row.UserName);
                   $("#editUserPassword").val(row.UserPassword);
                   $("#editNickName").val(row.NickName);
                   $("#editDeptID").val(row.DeptID);
                   $("#editPhone").val(row.Phone);
                 
                   //  $("#UserID").combobox('setValue', row.UserID);
                   //   $('#edit').form('clear');

                   url = '/ashx/RoleList.ashx?action=edit&UserID=' + row.UserID;
                   formId = "#editForm";
                   dialogId = "#edittbUserDialog";


               }
               else {
                   $.messager.alert("提示", "您没有选中任何行！");
               }
           }

           function edit() {

               $(formId).form('submit', {
                   url: url,
                   onSubmit: function () {
                       // alert(formId);
                       return $(this).form('validate');
                   
                   },
                   // success: successCallback
                   success: function (data) {
                       //alert(data)
                       //$.messager.show({
                       //    title: 'success',
                       //    msg: data
                       //});


                       //$.messager.alert("提示", data);

                       if (data == 'ok') {
                           $.messager.show({
                               title: 'success',
                               msg: '修改成功！'
                           });
                           $(dialogId).dialog('close');
                           $('#ReceiveList').datagrid('reload');
                       } else {
                           $.messager.show({
                               title: 'Error',
                               msg: '修改失败！'
                           });
                       }

                       //$(dialogId).dialog('close');
                       $('#ReceiveList').datagrid('reload');
                   }
               });


               //$.post('/ashx/RoleList.ashx', {action:'edit',UserID:UserID, UserName: UserID, UserPassword: UserID }, function (data, status) {

               //    if (data == "ok") {
               //        $('#ReceiveList').datagrid('reload');
               //    } else {
               //        $.messager.show({
               //            title: 'Error',
               //            msg: '删除该科室失败!'
               //        });
               //    }
               //});
           }

           //多条件查询方法
           function tsearch() {
              //  var hoistalName = $("#hoistalName").combobox("getValue");
               var UserID = $("#UserID").val();
               //alert(depName);
               $('#ReceiveList').datagrid('options').pageNumber = 1;
               $('#ReceiveList').datagrid('getPager').pagination({ pageNumber: 1 });
               $('#ReceiveList').datagrid('options').url = '/ashx/RoleList.ashx?action=search&UserID='+UserID;
               $('#ReceiveList').datagrid("reload");
           }
    </script>

</head>
<body>
   <br/>
      <div class="searchitem">
    <label>UserID：</label>
    <input type="text" id="UserID" class="easyui-validatebox" />
          <a href="#" class="easyui-linkbutton" onclick="tsearch()" >查询</a>
    </div>
 
 <table id="ReceiveList" title="Custom DataGrid Pager" style="width:700px;height:400px"
            data-options="rownumbers:true,singleSelect:true,pagination:true,url:'/ashx/RoleList.ashx?action=GetRoleList',method:'get',pageSize:10
            ">
        <thead>
            <tr>
                <th data-options="field:'UserID',checkbox:true,width:80">用户ID</th>
                <th data-options="field:'UserName',width:100">用户名</th>
                <th data-options="field:'UserPassword',width:80,align:'right'">用户密码</th>
                <th data-options="field:'NickName',width:80,align:'right'">昵称</th>
                <th data-options="field:'DeptID',width:240">部门ID</th>
                <th data-options="field:'Phone',width:60,align:'center'">电话</th>
            </tr>
        </thead>
    </table>


          <div id="addtbUserDialog" class="easyui-dialog" closed="true" buttons="#addtbUser-buttons" style="padding:10px 20px"> 
               <form id="addForm"  method="post">
                   <table class="align-center">
                       <tr>
                           <td> 用户名</td>
                           <td><input id="Text1"  name="UserName" class="easyui-validatebox" data-options="required:true" type="text"/></td>
                       </tr>
                        <tr>
                           <td>用户密码</td>
                           <td><input id="Password1" name="UserPassword"  class="easyui-validatebox" data-options="required:true" type="password"/></td>
                       </tr>
                        <tr>
                           <td>昵称</td>
                           <td><input id="Text2"  name="NickName" class="easyui-validatebox" data-options="required:true" type="text"/></td>
                       </tr>
                        <tr>
                           <td>部门ID</td>
                           <td><input id="Text3" name="DeptID"  class="easyui-validatebox" data-options="required:true" type="text"/></td>
                       </tr>
                        <tr>
                           <td>电话</td>
                           <td><input id="Text4" name="Phone" class="easyui-validatebox" data-options="required:true"  type="text"/></td>
                       </tr>
                   </table>
            
               </form>

            </div>
            <div id="addtbUser-buttons">
                <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="add()">保存</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#addtbUserDialog').dialog('close')">关闭</a>
            </div>




           <div id="edittbUserDialog" class="easyui-dialog" closed="true" buttons="#edittbUser-buttons" style="padding:10px 20px;"  >
               <form id="editForm"  method="post"   >
                <table class="align-center">
                       <tr>
                           <td> 用户名</td>
                           <td><input id="editUserName"  name="UserName" class="easyui-validatebox" data-options="required:true" type="text"/></td>
                       </tr>
                        <tr>
                           <td>用户密码</td>
                           <td><input id="editUserPassword" name="UserPassword"  class="easyui-validatebox" data-options="required:true" type="password"/></td>
                       </tr>
                        <tr>
                           <td>昵称</td>
                           <td><input id="editNickName"  name="NickName" class="easyui-validatebox" data-options="required:true" type="text"/></td>
                       </tr>
                        <tr>
                           <td>部门ID</td>
                           <td><input id="editDeptID" name="DeptID"  class="easyui-validatebox" data-options="required:true" type="text"/></td>
                       </tr>
                        <tr>
                           <td>电话</td>
                           <td><input id="editPhone" name="Phone" class="easyui-validatebox" data-options="required:true"  type="text"/></td>
                       </tr>
                   </table>
              
               </form>
            </div>
            <div id="edittbUser-buttons">
                <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="edit()">保存</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#edittbUserDialog').dialog('close')">关闭</a>
            </div>



</body>
</html>
View Code

 

后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
namespace EasyUIDemo.ashx
{
    /// <summary>
    /// RoleList 的摘要说明
    /// </summary>
    public class RoleList : IHttpHandler
    {

        
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            String action = context.Request["action"];

            if (action.Equals("GetRoleList"))
            {
                DataTable dt = SqlHelper.ExecuteDt("select UserID,UserName,UserPassword,NickName,DeptID,Phone from tbUser");
                context.Response.Write(FormatToJson.ToJson(dt));
            
            }
            //添加
            else if (action.Equals("add"))
            {
                String UserName = context.Request["UserName"];
                String UserPassword = context.Request["UserPassword"];
                String NickName = context.Request["NickName"];
                String DeptID = context.Request["DeptID"];
                String Phone = context.Request["Phone"];



                String sql = "insert into tbUser(UserName,UserPassword,NickName,DeptID,Phone) values(@UserName,@UserPassword,@NickName,@DeptID,@Phone)";
                SqlParameter[] para = new SqlParameter[] { 
                                                           new SqlParameter("@UserName",UserName),
                                                            new SqlParameter("@UserPassword",UserPassword),
                                                             new SqlParameter("@NickName",NickName),
                                                              new SqlParameter("@DeptID",DeptID),
                                                            new SqlParameter("@Phone",Phone),
                                                           };
                int i = SqlHelper.ExecuteSql(sql, para);

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
ASP.NETCore中使用EFCore（MySql）CodeFirst发布时间：2022-07-10
下一篇：
asp.netcoreefScaffold-DbContext发布时间：2022-07-10
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

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

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