• 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,
                     600,
                    auto true,
                    rowNum: 100,
                    colNames: columns,
                    colModel: [
                    { name: 'Id', key: true, index: 'Id', hidden: true,  60 },
                    { name: 'City', index: 'City',  60, align: "center" },
                    { name: 'Stayday', index: 'Stayday',  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,
                     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,
                     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>
  • 相关阅读:
    jQuery.hover() 函数详解
    深入了解css的行高Line Height属性
    yii2 restfulapi QueryParamAuth验证
    yii2 restfulapi 的配置和访问
    yii2 urlmanager的配置
    xubuntu install nodejs
    使用Putty连接VirtualBox的Ubuntu
    mvc与mvvm
    对二叉树进行广度优先遍历
    JavaScript 中的 FileReader
  • 原文地址:https://www.cnblogs.com/zhengwei-cq/p/9024177.html
Copyright © 2020-2023  润新知