jqgrid 增删改页面快速构建

其他 2018-05-11 14:03:23 阅读次数: 1 
<%@ 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>

猜你喜欢

转载自www.cnblogs.com/zhengwei-cq/p/9024177.html
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
女程序员是这样被恶搞的
B/S 和 C/S 的优缺点
vector一直申请会怎样？
座头鲸识别比赛(Humpback Whale Identification)总结
Linux高性能服务器编程——I/O复用 select
Mysql连接数据库（当包使用）
通过URI获取的文件路径为null的解决方法
1022-Primes on Interval(素数筛选+二分查找) ZCMU
Python出现： TypeError: expected string or buffer
bzoj2434: [Noi2011]阿狸的打字机 ac自动机+树状数组
每日归档
更多
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022