jqgrid 增删改页面快速构建
Posted zhengwei_cq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jqgrid 增删改页面快速构建相关的知识，希望对你有一定的参考价值。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InvitationRouteManage.aspx.cs" Inherits="OilDigital.CGGL.InvitationApproval.Web.InvitationRouteManage" %> <!DOCTYPE html> <link href="../css/jquery-ui.css" rel="stylesheet" /> <link href="../css/ui.jqgrid.css" rel="stylesheet" /> <script src="../js/jquery.min.js"></script> <script src="../js/jquery-ui.js"></script> <script src="../js/jquery.jqGrid.min.js"></script> <script src="../js/GridHelper.js"></script> <script src="../js/grid.locale-cn.js"></script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> var columns = ["Id", "停留城市", "停留天数"]; var localData = []; var gridHelper = new jqGridHelper(); jQuery(document).ready(function () { initGrid(); doQuery(); $j("input").focus(function () { $j("#error_msg").css("display", "none"); $j("#error_msg1").css("display", "none"); }); }); function initGrid() { localGrid = jQuery("#tbList"); localGrid.jqGrid({ data: localData, datatype: "local", height: 300, width: 600, autowidth: true, rowNum: 100, colNames: columns, colModel: [ { name: ‘Id‘, key: true, index: ‘Id‘, hidden: true, width: 60 }, { name: ‘City‘, index: ‘City‘, width: 60, align: "center" }, { name: ‘Stayday‘, index: ‘Stayday‘, width: 40, align: "center" } ], emptyrecords: "没有任何数据", pager: "#pager", viewrecords: true, rownumbers: true, shrikToFit: true, loadonce: true, caption: "访问路线" }).navGrid(‘#pager‘, { search: true, edit: false, add: false, del: false, searchtext: "搜索" }); gridHelper.SetAutoResize(localGrid, -8, -215, true, true); } function doQuery() { var id = invitationId; OilDigital.CGGL.InvitationApproval.Web.InvitationRouteManage.GetInvitationRouteByInvitationId(parseInt(id), queryCallback_Local); } function queryCallback_Local(rep) { try { if (rep.error != null) { alert(rep.error.Message); return; } localData = rep.value; gridHelper.refreshGrid(localGrid, localData); } catch (e) { return; } } function addRoute() { $j("#add_City").val(""); $j("#add_Stayday").val(""); $j("#addRoute").css("display","block"); $j("#addRoute").dialog({ modal:true, width: 300, height: 200, title: "增加来华路线信息", buttons:{ "确定": function () { var id = invitationId; var city = $j("#add_City").val(); var stayday = $j("#add_Stayday").val(); if (city == "" || city== null) { $j("#error_msg").show(); $j("#error_msg").html("城市名不能为空！"); return; } var reg = /^[1-9]\d*$/; if (!reg.test(stayday)) { $j("#error_msg").css("display", "block"); $j("#error_msg").html("停留天数只能输入正整数！"); return; } var rep = OilDigital.CGGL.InvitationApproval.Web.InvitationRouteManage.AddInvitationRoute(id, city, stayday); if (rep.error != null) { $j("#error_msg").css("display", "block"); $j("#error_msg").html("添加来华路线信息出错，原因：" + rep.error.Message); return; } else { $j(this).dialog("close"); alert("新增成功！"); doQuery(); } }, "取消": function () { $j(this).dialog("close"); } } }); } function editRoute() { var selRowId = localGrid.jqGrid(‘getGridParam‘, ‘selrow‘); if (selRowId == null) { alert("请选择一行然后进行操作"); return; } var rep = OilDigital.CGGL.InvitationApproval.Web.InvitationRouteManage.GetInvitationRouteById(selRowId); if (rep.error != null) { alert(rep.error.Message); return; } $j("#edit_City").val(rep.value.City); $j("#edit_Stayday").val(rep.value.Stayday); $j("#editRoute").css("display", "block"); $j("#editRoute").dialog({ modal: true, width: 300, height: 200, title: "编辑来华线信息", buttons: { "确定": function () { var city = $j("#edit_City").val(); var stayday = $j("#edit_Stayday").val(); if (city == ""||city==null) { $j("#error_msg1").css("display", "block"); $j("#error_msg1").html("城市不能为空！"); return; } var reg = /^[1-9]\d*$/; if (!reg.test(stayday)) { $j("#error_msg1").css("display","block"); $j("#error_msg1").html("停留天数只能输入正整数！"); return; } var rep = OilDigital.CGGL.InvitationApproval.Web.InvitationRouteManage.EditInvitationRoute(selRowId, city, stayday); if (rep.error != null) { $j("#error_msg1").css("display", "block"); $j("#error_msg1").html("编辑来华路线信息出错，原因：" + rep.error.Message); return; } else { $j(this).dialog("close"); alert("修改成功！"); doQuery(); } }, "取消": function () { $j(this).dialog("close"); } } }); } function deleteRoute() { var selRowId = localGrid.jqGrid(‘getGridParam‘, ‘selrow‘); if (selRowId == null) { alert("请选择一行然后进行操作"); return; } if (!confirm("确定要删除选中的记录吗？")) return; var rep = OilDigital.CGGL.InvitationApproval.Web.InvitationRouteManage.DeleteRouteById(selRowId); if (rep.error != null) { alert("删除数据出错，原因:" + rep.error.Message); return; } doQuery(); } </script> </head> <body> <form id="form1" runat="server"> <asp:HiddenField ID="hfEaId" runat="server" /> <div> <div class="Titleblueback4" style="padding-top:15px; color:#039; font-size:15pt;font-weight:bold;text-align:center">来 华 路 线 编 辑</div> <div> <input type="button" id="edit" value="修 改" onclick="editRoute();" /> <input type="button" id="add" value="新 增" onclick="addRoute();" /> <input type="button" id="delete" value="删 除" onclick="deleteRoute();" /> </div> <div> <table id="tbList"></table> <div id="pager"></div> </div> </div> <!--新增--> <div id="addRoute" style="display:none"> <table> <tbody> <tr> <td><label>城市：</label></td> <td><input type="text" id="add_City"/></td> </tr> <tr> <td><label>停留天数：</label></td> <td><input type="text" id="add_Stayday"/></td> </tr> </tbody> </table> <span style="display:none;color:red" id="error_msg"></span> </div> <!--修改--> <div id="editRoute" style="display:none"> <input type="hidden" id="hfId" /> <table> <tbody> <tr> <td><label>城市：</label></td> <td><input type="text" id="edit_City"/></td> </tr> <tr> <td><label>停留天数：</label></td> <td><input type="text" id="edit_Stayday"/></td> </tr> </tbody> </table> <span style="display:none;color:red" id="error_msg1"></span> </div> </form> </body> </html>
以上是关于jqgrid 增删改页面快速构建的主要内容，如果未能解决你的问题，请参考以下文章
jqgrid有没有增删改后不刷新表格，而由自己手动刷新的方法？