VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 数据库 > T-SQL >

  • sql语句大全之EasyuiDatagird绑定分页.NetMVC

引入EasyUi所有需要的脚本，样式 

<link href="/easyui/themes/default/easyui.css" rel="stylesheet" />
<link href="/easyui/themes/icon.css" rel="stylesheet" />
<script src="/easyui/jquery.min.js"></script>
<script src="/easyui/jquery.easyui.min.js"></script>
<script src="/easyui/locale/easyui-lang-zh_CN.js"></script>

JS脚本部分

复制代码
  1 <script type="text/javascript">
  2     $(function () {
  3         obj = {
  4             editRow: undefined, 
  5             add: function () {
  6       
  7                 $('#save,#redo').show();
  8                 if (this.editRow == undefined)
  9                  {
 10                     /*appenRow  在末尾添加一行*/
 11                     $('#box').datagrid('insertRow', {
 12                         index: 0,
 13                         row: {
 14                             cityname: '',
 15                             intro: '',
 16                             code: '',
 17                         }
 18                     });
 19                     //将第一行设置为可编辑状态
 20                     $("#box").datagrid('beginEdit', 0),
 21                    this.editRow =0 ;
 22 
 23                 }
 24             },
 25          
 26             edit:function()
 27             {
 28                 var rows = $('#box').datagrid('getSelections');
 29                 if (rows.length == 1) {
 30                     if (this.editRow != undefined) {
 31 
 32                         $("#box").datagrid('endEdit', this.editRow)
 33 
 34                     }
 35                     if (this.editRow == undefined) {
 36                         var index=$("#box").datagrid('getRowIndex',rows[0])
 37                         $('#save,#redo').show();
 38                         $("#box").datagrid('beginEdit', index)
 39                         this.editRow = index
 40                         //关闭当前行编辑状态
 41                         $("#box").datagrid('unselectRow',index)
 42                     }
 43                 }
 44                 else {
 45                     $.messager.alert('警告', '修改只能选中一行','warning');
 46                 }
 47                 
 48             },
 49             /*删除*/
 50             remove:function()
 51             {
 52                 var rows = $('#box').datagrid('getSelections');
 53                 if (rows.length > 0) {
 54                     $.messager.confirm('确定操作', '您确定要删除所选中的记录吗', function (flag) {
 55                         if (flag)
 56                         {
 57                             var ids = [];
 58                             for (var i = 0; i < rows.length; i++)
 59                             {
 60                                 ids.push(rows[i].cid);
 61                             }
 62                             $.ajax(
 63                                 {
 64                                     url: "/cityManager/cityRemove",
 65                                     data:{"ids":ids.join(',')},
 66                                     type: "post",
 67                                     success: function (data)
 68                                     {
 69                                         if (data.Message == "Success")
 70                                         {
 71                                             $("#box").datagrid("loaded");
 72                                             $("#box").datagrid("load");
 73                                             $("#box").datagrid("unselectAll");
 74                                             $.messager.show({
 75                                                 title: '提示',
 76                                                 msg:data.flag+'个信息被删除成功！',
 77                                             })
 78                                         }
 79                                     },
 80                                     error: function (data)
 81                                     {
 82                                         $.messager.alert(data);
 83                                     }
 84                                 });
 85                                  obj.editRow = undefined;
 86                         }
 87                     }
 88                     )
 89                 }
 90                 else {
 91                     $.messager.alert('警告','请选中一行或多行','info')
 92 
 93                 }
 94             },
 95             save: function ()
 96             {
 97                 //这两句不应该放这里，应该是保存之后放这里
 98                 //$('#save,#redo').hide();
 99                 //this.editRow = false;
100                 //将第一行设置为结束编辑
101                 //保存当前行的数据结束编辑     
102                 $("#box").datagrid('endEdit', this.editRow)
103              
104             },
105             redo: function ()
106             {
107                 $('#save,#redo').hide();
108                 this.editRow = undefined;
109                 /*回滚所有从创建或上一次调用acceptChanges函数后更该的数据*/
110                $("#box").datagrid('rejectChanges')
111             }
112         };  
113         /*加载表格*/
114         $("#box").datagrid({
115             url: '/cityManager/cityQuery',
116             singleSelect: false,//多选
117             pagination: true,//分页
118             pageSize: 10,//页面大小
119             pageList: [5, 10, 15, 20, 30, 50, 80, 200],
120             rownumbers:true,//编号
121             title: "城市信息",
122             //右击表格事件
123             onRowContextMenu:function(e,rowIndex,rowData)
124             {
125                 /*去掉默认的右击的面板*/
126                 e.preventDefault();
127                 /*显示Menu锁定位置*/
128                 $('#menu').menu('show', {
129                     left: e.pageX,
130                     top: e.pageY,
131 
132                 })
133             },
134 
135             //双击选中行执行的事件（索引行，数据）
136             onDblClickRow: function (rowIndex, rowData) {  
137                 //将上一次编辑行关闭并且保存        
138                 if (obj.editRow!=undefined) {
139                     $("#box").datagrid('endEdit', obj.editRow);
140                     
141                 }
142                 if (obj.editRow == undefined) {
143                     $('#save,#redo').show();
144                     $("#box").datagrid('beginEdit', rowIndex);
145                     obj.editRow = rowIndex;
146                 }
147             },
148             
149             //编辑结束后事件 *添加和跟新的操作在这了*/
150           onAfterEdit:function(rowIndex,rowDate,changes)
151           {
152               var url = '';
153               var info = '';
154               /*从上一次的提交获取所有行，类型参数有，inserted,deleted,updated
155               返回的一个数组 */           
156               var inserted = $("#box").datagrid('getChanges', 'inserted');
157               var updated = $("#box").datagrid('getChanges', 'updated');
158               /*添加*/
159                if (inserted.length> 0)
160                 {
161                     url = '/cityManager/addCity';
162                    info = '添加';
163                }
164               /*更新*/
165                 if (updated.length > 0)
166                 {
167                     url = '/cityManager/EditCity';
168                     var info = '更新';
169                 }
170                 $.ajax(
171                     {
172                         url: url,
173                         data: rowDate,
174                         type: "post",
175                         success: function (data) {
176                             if (data.Message == "Success") {
177                                 $("#box").datagrid("loaded");//重新加载
178                                 $("#box").datagrid("load");//加载
179                                 $("#box").datagrid("unselectAll");//去掉所有复选框
180                                 $.messager.show({
181                                     title: '提示',
182                                     msg: data.flag + '个信息被"'+info+'"成功！',
183                                 })                   
184                             }
185                         },
186                         error: function (data) {
187                             $.messager.alert(data);
188                         }
189                     });
190                 $('#save,#redo').hide();
191                 obj.editRow = undefined;//将对象重新赋值为undefined                        
192             },        
193           columns: [[
194               {
195                   field: "cid",
196                   title: "编号",   
197                   align: 'center',
198                   width: 300,
199                   checkbox:true
200               },
201                 {
202                     field: "cityname",
203                     title: "城市名称",
204                     //   hidden: true 隐藏列
205                     align: 'center',
206                     width: 300,
207                     editor: {
208                         type: 'validatebox',
209                         options: {
210                             required:true,
211                         }
212                     }
213                 },
214                 {
215                     field: "intro",
216                     title: "介绍",     
217                     align: 'center',
218                     width: 100,
219                     editor: {  //设置为编辑行
220                         type: 'validatebox',
221                         options: {
222                             required: true,
223                         }
224                     }
225                 },
226             {
227                 field: "code",
228                 title: "代码",
229                 align: 'center',
230                 width: 100,
231                 editor: {  //
232                     type: 'validatebox',
233                     options: {
234                         required: true,
235                     }
236                 }
237             },
238             {
239                 field: "createtime",
240                 title: "创建时间",
241                 align: 'center',
242                 width: 100,
243                 editor: {  //
244                     type: 'datetimebox',
245                     options: {
246                         required: true,
247                     }
248                 }
249             },
250             ]],
251             toolbar: "#tb",
252         })   
253     })
254 </script>
复制代码

HTML部分

复制代码
 1 <table id="box"> </table>
 2 <div id="tb" style="padding:5px;height:auto">
 3     <div style="margin-bottom:5px">
 4         <a href="#" class="easyui-linkbutton" onclick="obj.add();" iconcls="icon-add" plain="true">添加</a>
 5         <a href="#" class="easyui-linkbutton" onclick="obj.edit();" iconcls="icon-edit" plain="true">修改</a>
 6         <a href="#" class="easyui-linkbutton" onclick="obj.remove();" iconcls="icon-remove" plain="true">删除</a>
 7         <a href="#" class="easyui-linkbutton" iconcls="icon-save" style="display:none" id="save" onclick="obj.save()" plain="true">保存</a>
 8         <a href="#" class="easyui-linkbutton" iconcls="icon-redo" style="display:none" id="redo" onclick="obj.redo()" plain="true">取消编辑</a>
 9     </div>  
10 </div>
11 <div id="menu" class="easyui-menu" style="width:100px;display:none">
12     <div onclick="obj.add();" iconcls="icon-add" plain="true">添加</div>
13     <div onclick="obj.edit();" iconcls="icon-edit" plain="true">修改</div>
14     <div onclick="obj.remove();" iconcls="icon-remove" plain="true">删除</div>
15 </div>
复制代码

后台.NetMVC代码

复制代码
  1       /*查询*/
  2         public ActionResult cityQuery()
  3         {
  4             //获取分页的页数
  5             int pageNum = Convert.ToInt32(Request.Params["page"]);
  6             //获取分页大小
  7             int pageSize = Convert.ToInt32(Request.Params["rows"]);
  8             var CityList = (from u in db.tb_city
  9                           orderby u.cid descending
 10                           where(u.isdelete==0)
 11                           select u).Skip(pageSize * (pageNum - 1)).Take(pageSize);
 12             //     using Newtonsoft.Json 序列化转成Json字符串
 13             var jsons = JsonConvert.SerializeObject(CityList);
 14     
 15             string json = "{\"total\":" + db.tb_city.ToList().Count + ",\"rows\": " + jsons + "}";
 16             return Content(json); 
 17         }
 18         /*删除*/
 19         public ActionResult cityRemove()
 20         {
 21     
 22             Hashtable ht = new Hashtable();
 23             string[] ids = ConvertHelper.GetString(Request["ids"]).Split(',');
 24             int flag = 0;
 25             foreach (var item in ids)
 26             {
 27                 tb_city model = db.tb_city.Find(ConvertHelper.GetInteger(item));
 28                 model.isdelete =1;
 29                 TryUpdateModel(model);
 30                 db.SaveChanges();
 31                 flag++;      
 32             }
 33             if (flag > 0)
 34             { 
 35               ht["Message"] = "Success";
 36               ht["flag"] = flag;
 37               ht["Resulet"] = true;
 38             }
 39             else
 40             {
 41              ht["Message"] = "Error";
 42              ht["Resulet"] = false;
 43             }
 44 
 45 
 46             return Json(ht);
 47           
 48         }
 49         /*添加*/
 50         public ActionResult addCity()
 51         {
 52             Hashtable ht = new Hashtable();
 53             string cityname = ConvertHelper.GetString(Request["cityname"]);
 54             string code = ConvertHelper.GetString(Request["code"]);
 55             string intro = ConvertHelper.GetString(Request["cityname"]);  
 56             tb_city model = new tb_city();
 57             model.cityname = cityname;
 58             model.code = code;
 59             model.intro = intro;
 60              model.isdelete = 0;
 61              db.tb_city.Add(model);
 62             int flag= db.SaveChanges();
 63    
 64           
 65             if (flag > 0)
 66             {
 67                 ht["Message"] = "Success";
 68                 ht["flag"] = flag;    
 69                 ht["Resulet"] = true;
 70             }
 71             else
 72             {
 73                 ht["Message"] = "Error";
 74                 ht["Resulet"] = false;
 75             }
 76             return Json(ht);
 77 
 78         }
 79 
 80         /*修改*/
 81         public ActionResult EditCity()
 82         {
 83             Hashtable ht = new Hashtable();
 84             string id = ConvertHelper.GetString(Request["cid"]);
 85             string cityname = ConvertHelper.GetString(Request["cityname"]);
 86             string code = ConvertHelper.GetString(Request["code"]);
 87             string intro = ConvertHelper.GetString(Request["cityname"]);
 88            string user = ConvertHelper.GetString(Request["cityname"]);
 89            tb_city model = db.tb_city.Find(ConvertHelper.GetInteger(id));
 90             model.cityname = cityname;
 91             model.code = code;
 92             model.intro = intro;
 93              model.isdelete = 0;
 94              TryUpdateModel(model);
 95             int flag= db.SaveChanges();
 96    
 97           
 98             if (flag > 0)
 99             {
100                 ht["Message"] = "Success";
101                 ht["flag"] = flag;    
102                 ht["Resulet"] = true;
103             }
104             else
105             {
106                 ht["Message"] = "Error";
107                 ht["Resulet"] = false;
108             }
109             return Json(ht);
110 
111         }
复制代码

运行后的效果

总结：主要是用到了EasyUIDatagrid中 ，编辑结束后事件onAfterEdit，添加和更新在这里编写（从上一次的提交获取所有行，类型参数有，inserted,deleted,updated 返回的一个数组编辑后的数据） 

var inserted = $("#box").datagrid('getChanges', 'inserted');  

var updated = $("#box").datagrid('getChanges', 'updated'); 


相关教程