效果:

  

 

html代码:

  1. <div style="padding-top: 50px; width: 800px; margin: 0 auto;">
  2. <!--使用JS加载方式-->
  3. <table id="tab"></table>
  4.  
  5. <!--按钮--->
  6. <div id="tb">
  7. <div style="padding: 5px;">
  8. <a href="#" class="easyui-linkbutton" data-options="iconCls:\'icon-add\', plain:true," onclick="obj.add();">添加</a>
  9. <a href="#" class="easyui-linkbutton" data-options="iconCls:\'icon-edit\', plain:true," onclick="obj.edit();">修改</a>
  10. <a href="#" class="easyui-linkbutton" data-options="iconCls:\'icon-remove\', plain:true," onclick="obj.remove();">删除</a>
  11. <a href="#" class="easyui-linkbutton" data-options="iconCls:\'icon-save\', plain:true," style="display: none;" id="save" onclick="obj.save();">保存</a>
  12. <a href="#" class="easyui-linkbutton" data-options="iconCls:\'icon-redo\', plain:true," style="display: none;" id="redo" onclick="obj.redo();">取消编辑</a>
  13. </div>
  14. <div style="padding-left: 10px; padding-bottom: 10px;">
  15. 搜索姓名(可以模糊查询):<input id="name" name="name" type="text" class="textbox" style="width: 130px;" />
  16. 查询时间 从:<input id="time_from" name="time_from" type="text" class="easyui-datebox" style="width: 130px;" />
  17. 到:<input id="time_to" name="time_to" type="text" class="easyui-datebox" style="width: 130px;" />
  18. <a id="search" href="#" class="easyui-linkbutton" data-options="iconCls:\'icon-search\'," style="margin-left: 20px; padding: 0 10px 0 10px;" onclick="obj.search();">搜索</a>
  19. </div>
  20. </div>
  21. </div>

 

JS代码:

  1. <script type="text/javascript">
  2. //扩展 dateTimeBox
  3. $.extend($.fn.datagrid.defaults.editors, {
  4. datetimebox: {
  5. init: function (container, options) {
  6. var input = $(\'<input type="text">\').appendTo(container);
  7. options.editable = false;
  8. input.datetimebox(options);
  9. return input;
  10. },
  11. getValue: function (target) {
  12. return $(target).datetimebox(\'getValue\');
  13. },
  14. setValue: function (target, value) {
  15. $(target).datetimebox(\'setValue\', value);
  16. },
  17. resize: function (target, width) {
  18. $(target).datetimebox(\'resize\', width);
  19. },
  20. destroy: function (target) {
  21. $(target).datetimebox(\'destroy\');
  22. },
  23. }
  24. });
  25. $(function () {
  26. obj = {
  27. editRow: undefined,//undefined默认为false
  28. search: function () {
  29. $(\'#tab\').datagrid(\'load\', {
  30. searchvalue: $.trim($(\'input[name="name"]\').val()),
  31. time_from: $(\'input[name="time_from"]\').val(),
  32. time_to: $(\'input[name="time_to"]\').val(),
  33. });
  34. },
  35. add: function () {
  36. $(\'#save,#redo\').show();
  37. /*
  38. //当前页行结尾添加
  39. $(\'#box\').datagrid(\'appendRow\', {
  40. user : \'bnbbs\',
  41. email : \'bnbbs@163.com\',
  42. date : \'2014-11-11\',
  43. });
  44. */
  45.  
  46. if (this.editRow == undefined) {
  47. //添加一行
  48. $(\'#tab\').datagrid(\'insertRow\', {
  49. index: 0,
  50. row: {
  51. /*
  52. user : \'bnbbs\',
  53. email : \'bnbbs@163.com\',
  54. date : \'2014-11-11\',
  55. */
  56. },
  57. });
  58. //将第一行设置为可编辑状态
  59. $(\'#tab\').datagrid(\'beginEdit\', 0);
  60. this.editRow = 0;
  61. }
  62. },
  63. save: function () {
  64. //这两句不应该放这里,应该是保存成功后,再执行
  65. //$(\'#save,#redo\').hide();
  66. //this.editRow = false;
  67. //将第一行设置为结束编辑状态
  68. $(\'#tab\').datagrid(\'endEdit\', this.editRow);//保存当前选定行
  69. },
  70. redo: function () {
  71. $(\'#save,#redo\').hide();
  72. this.editRow = undefined;
  73. $(\'#tab\').datagrid(\'rejectChanges\');
  74. },
  75. edit: function () {
  76. var rownumber = $(\'#tab\').datagrid(\'getSelections\');
  77. if (rownumber.length == 1) {
  78. //如果为false时,可以编辑本行。不可在点击另外的一行。
  79. if (this.editRow == undefined) {
  80. //获取选中行的索引
  81. var index = $(\'#tab\').datagrid(\'getRowIndex\', rownumber[0]);
  82. $(\'#save,#redo\').show();
  83. $(\'#tab\').datagrid(\'beginEdit\', index);
  84. this.editRow = index;//原先是没有值,现在把rowindex的值给obj.editrow
  85. }
  86. }
  87. else {
  88. $.messager.alert("提示", "请选择一行!");
  89. }
  90. },
  91. remove: function () {
  92. var delnumber = $(\'#tab\').datagrid(\'getSelections\');
  93. if (delnumber.length > 0) {
  94. $.messager.confirm("提示", "是否要确定删除!", function (flag) {
  95. if (flag) {
  96. var ids = [];
  97. for (var i = 0; i < delnumber.length; i++) {
  98. ids.push("\'" + delnumber[i].id + "\'");
  99. }
  100. //删除
  101. $.ajax({
  102. type: \'post\',
  103. url: \'../ashx/delete.ashx\',
  104. data: {
  105. ids: "(" + ids.join(\',\') + ")",
  106. },
  107. beforeSend: function () {
  108. $(\'#tab\').datagrid(\'loading\');
  109. },
  110. success: function (data) {
  111. if (data == -1) {
  112. $.messager.alert("提示", "删除错误!");
  113. }
  114. else {
  115. $(\'#tab\').datagrid(\'loaded\');
  116. $.messager.show({
  117. title: \'提示\',
  118. msg: data + \'名用户被删除成功!\',
  119. timeout: 3000,//2秒钟
  120. showtype: \'fade\',//null,slide,fade,show
  121. });
  122. $(\'#tab\').datagrid(\'load\');//重新加载数据
  123. $(\'#tab\').datagrid(\'unselectAll\');//取消所有选中
  124. }
  125. },
  126. })
  127. }
  128. });
  129. }
  130. else {
  131. $.messager.alert("提示", "请选择要删除的行。");
  132. }
  133. },
  134. };
  135. //格式化日期输出样式
  136. $(\'#time_from, #time_to\').datebox({
  137. formatter: function (date) { return date.getFullYear() + \'/\' + (date.getMonth() + 1) + \'/\' + date.getDate(); },
  138. });
  139. //Datagrid设置
  140. $(\'#tab\').datagrid({
  141. //===================================== 样式 ===============================================//
  142. width: 800,//宽度
  143. title: \'信息列表\',//标题名
  144. iconCls: \'icon-search\',//图标
  145. //singleSelect: true,//是否单选
  146. striped: true,//是否开启斑马线
  147. fitColumns: false,//是否自适应宽度(出现滚动条)
  148. loadMsg: \'正在努力加载,请稍后………………\',//显示加载提示信息
  149. //rownumbers: true,//显示行号
  150. //showHeader: false,//是否显示行头(标题)
  151. //showFooter:false,//显示行尾,默认情况下不显示,要在后台使用json数据传递
  152. //==========================================================================================//
  153.  
  154.  
  155. //============================= 加载数据,要显示的字段 =========================================//
  156. //要加载的数据
  157. url: "../Json/datagridjson.ashx",
  158. //要显示的列
  159. columns: [[
  160. {
  161. field: \'id\',
  162. title: \'编号\',
  163. checkbox: true,
  164. },
  165. {
  166. field: \'name\',
  167. title: \'姓名\',
  168. width: 100,//所有字段设置成100,起到自动平均分配大小的作用
  169. halign: \'center\',//仅标题居中
  170. //显示数据的时候,格式化数据
  171. //formatter: function (value, row, index) {
  172. // return \'[ \' + value + \' ]\';
  173. //},
  174. //设置为可以编辑的列,只有这样才能使用编辑
  175. editor: {
  176. type: \'validatebox\',
  177. //其中写的使一些验证,像邮箱验证等等
  178. options: {
  179. required: true,
  180. },
  181. },
  182. },
  183. {
  184. field: \'sex\',
  185. title: \'性别\',
  186. width: 100,//所有字段设置成100,起到自动平均分配大小的作用
  187. //设置为可以编辑的列,只有这样才能使用编辑
  188. editor: {
  189. type: \'validatebox\',
  190. //其中写的使一些验证,像邮箱验证等等
  191. options: {
  192. required: true,
  193. },
  194. },
  195. },
  196. //在字段中使用排序,每点击一次,都会向后台POST要排序的字段和正序还是倒序排列。
  197. {
  198. field: \'createtime\',
  199. title: \'创建时间\',
  200. width: 400,//所有字段设置成100,起到自动平均分配大小的作用
  201. sortable: true,//允许排序
  202. }
  203. ]],
  204. //==========================================================================================//
  205.  
  206.  
  207. //===================================== 分页 ===============================================//
  208. //显示分页控件栏
  209. pagination: true,
  210. pageNumber: 1,//初始化的时候在第几页
  211. pageSize: 10,//,每页显示的条数
  212. pageList: [10, 15, 20],//每页显示的条数
  213. //==========================================================================================//
  214.  
  215.  
  216. //===================================== 排序 ===============================================//
  217. //通过POST传递到后台,然后进行排序。
  218. sortName: \'createtime\',
  219. sortOrder: \'desc\',
  220. //==========================================================================================//
  221.  
  222.  
  223. //===================================== 按钮 ===============================================//
  224. toolbar: \'#tb\',
  225. //==========================================================================================//
  226.  
  227.  
  228. //===================================== 添加一行 ===============================================//
  229. //检测是否完成添加
  230. onAfterEdit: function (rowIndex, rowData, changes) {
  231. $(\'#save,#redo\').hide();
  232. obj.editRow = undefined;
  233. //console.log(rowData);
  234. //判断是删除数据还是修改数据
  235. var inserted = $(\'#tab\').datagrid(\'getChanges\', \'inserted\');
  236. var updated = $(\'#tab\').datagrid(\'getChanges\', \'updated\');
  237. //新增
  238. if (inserted.length > 0) {
  239. $.ajax({
  240. type: \'post\',
  241. url: \'../ashx/insert.ashx\',
  242. data: {
  243. rows: inserted,
  244. },
  245. beforeSend: function () {
  246. $(\'#tab\').datagrid(\'loading\');
  247. },
  248. success: function (data) {
  249. if (data == -1) {
  250. $.messager.alert("提示", "增加信息错误!");
  251. }
  252. else {
  253. $(\'#tab\').datagrid(\'loaded\');
  254. $.messager.show({
  255. title: \'提示\',
  256. msg: data + \'名增加成功!\',
  257. timeout: 3000,//2秒钟
  258. showtype: \'fade\',//null,slide,fade,show
  259. });
  260. $(\'#tab\').datagrid(\'load\');//重新加载数据
  261. }
  262. },
  263. })
  264. }
  265. //修改
  266. if (updated.length > 0) {
  267. $.ajax({
  268. type: \'post\',
  269. url: \'../ashx/update.ashx\',
  270. data: {
  271. rows: updated,
  272. },
  273. beforeSend: function () {
  274. $(\'#tab\').datagrid(\'loading\');
  275. },
  276. success: function (data) {
  277. if (data == -1) {
  278. $.messager.alert("提示", "修改信息错误!");
  279. }
  280. else {
  281. $(\'#tab\').datagrid(\'loaded\');
  282. $.messager.show({
  283. title: \'提示\',
  284. msg: data + \'修改成功!\',
  285. timeout: 3000,//2秒钟
  286. showtype: \'fade\',//null,slide,fade,show
  287. });
  288. $(\'#tab\').datagrid(\'load\');//重新加载数据
  289. }
  290. },
  291. })
  292. }
  293. },
  294. //==========================================================================================//
  295. //双击一行,进行修改
  296. onDblClickRow: function (rowIndex, rowData) {
  297. //如果为false时,可以编辑本行。不可在点击另外的一行。
  298. if (obj.editRow == undefined) {
  299. $(\'#save,#redo\').show();
  300. $(\'#tab\').datagrid(\'beginEdit\', rowIndex);
  301. obj.editRow = rowIndex;//原先是没有值,现在把rowindex的值给obj.editrow
  302. }
  303. }
  304. });
  305. })
  306. </script>

 

后台代码:

datagridjson.ashx:

  • 加载数据,搜索:
  1. public void ProcessRequest(HttpContext context)
  2. {
  3. context.Response.ContentType = "application/json";
  4. //接受前台传递来的页数和每页显示的条数
  5. //前台开启分页之后,传递来的参数
  6. int pageIndex = Convert.ToInt32(context.Request["page"]);
  7. int pagenumber = Convert.ToInt32(context.Request["rows"]);
  8. //接收排序字段
  9. string sortfield = context.Request["sort"];
  10. string sortDescOrasc = context.Request["order"];
  11. //------------------------------------------搜索-----------------------------------------
  12. string connect = "";
  13. string searchvalue = "";
  14. string time_from = "";
  15. string time_to = "";
  16. if (context.Request["searchvalue"] != null && context.Request["searchvalue"] != "")
  17. {
  18. searchvalue = "name like \'%" + context.Request["searchvalue"] + "%\' and ";
  19. connect += searchvalue;
  20. }
  21. if (context.Request["time_from"] != null && context.Request["time_from"] != "")
  22. {
  23. time_from = "createtime>=\'" + context.Request["time_from"].Replace(\'/\',\'-\') + "\' and ";
  24. connect += time_from;
  25. }
  26. if (context.Request["time_to"] != null && context.Request["time_to"] != "")
  27. {
  28. time_to = "createtime<=\'" + context.Request["time_to"].Replace(\'/\', \'-\') + "\' and ";
  29. connect += time_to;
  30. }
  31. if (connect != "")
  32. {
  33. connect = " where " + connect.Substring(0, connect.Length - 4);
  34. }
  35. //--------------------------------------------------------------------------------------------
  36. //存储数据
  37. DataTable dt = new DataTable();
  38. if (pageIndex == 1)
  39. {
  40. //加载第一页
  41. string pageIndexOne = "select top " + pagenumber + " id, name, sex, createtime from Tb_person "+connect+" order by " + sortfield + " " + sortDescOrasc + "";
  42. //获取并转换为JSON数据
  43. dt = SQLHelper.ExecuteTable(pageIndexOne, CommandType.Text);
  44. }
  45. else if (pageIndex != 1)
  46. {
  47. //加载非第一页
  48. string pageIndexNotOne = @"select id, name, sex, createtime from (select ROW_NUMBER() over(order by " + sortfield + " " + sortDescOrasc + ") as rownum, id, name, sex, createtime from Tb_person " + connect + " ) as a where a.rownum > " + (pageIndex - 1) * pagenumber + " and a.rownum <= " + pageIndex * pagenumber + "";
  49. //获取并转换为JSON数据
  50. dt = SQLHelper.ExecuteTable(pageIndexNotOne, CommandType.Text);
  51. }
  52. else { }
  53. //将datatable转换为json
  54. //在返回的JSON数据中,加入total属性(总记录数)
  55. //那么他就会在加载的时候,显示总记录数。
  56. //显示的格式是【 {"total":12, "rows":"[{},{},{}]"} 】,rows内为JSON数据。
  57. //计算总条数(同时可以统计,使用关键字查询之后的条数)
  58. int totalnumber = (int)SQLHelper.ExcuteScalar("select count(*) from Tb_person " + connect + "", CommandType.Text);
  59. //返回数据
  60. string strjson = "{\"total\":" + totalnumber + ", \"rows\":" + DatatableToJson.ToJson(dt) + "}";
  61. context.Response.Write(strjson);
  62. }

 

 

insert.ashx:

  1. public void ProcessRequest(HttpContext context)
  2. {
  3. string name = context.Request["rows[0][name]"];
  4. string sex = context.Request["rows[0][sex]"];
  5. int count = 0;
  6. try
  7. {
  8. count = SQLHelper.ExecuteNonQuery("insert into Tb_person (name, sex) values (\'" + name + "\', \'" + sex + "\')", CommandType.Text);
  9. if (count != 0)
  10. {
  11. context.Response.Write(1);
  12. }
  13. }
  14. catch
  15. {
  16. context.Response.Write(-1);
  17. }
  18. }

 

 

delete.ashx:

  1. public void ProcessRequest(HttpContext context)
  2. {
  3. int count = 0;
  4. string deletevalue = context.Request["ids"];
  5. try
  6. {
  7. count = (int)SQLHelper.ExecuteNonQuery("delete from Tb_person where id in " + deletevalue + "", CommandType.Text);
  8. if (count > 0)
  9. {
  10. context.Response.Write(count);
  11. }
  12. }
  13. catch
  14. {
  15. context.Response.Write(-1);
  16. }
  17. }

 

 

update.ashx:

  1. public void ProcessRequest(HttpContext context)
  2. {
  3. string id = context.Request["rows[0][id]"];
  4. string name = context.Request["rows[0][name]"];
  5. string sex = context.Request["rows[0][sex]"];
  6. int count = 0;
  7. try
  8. {
  9. count = SQLHelper.ExecuteNonQuery("update Tb_person set name = \'"+name+"\', sex = \'"+sex+"\' where id = \'"+id+"\'", CommandType.Text);
  10. if (count >0 )
  11. {
  12. context.Response.Write(count);
  13. }
  14. }
  15. catch
  16. {
  17. context.Response.Write(-1);
  18. }
  19. }

 

版权声明:本文为KTblog原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/KTblog/p/4931219.html