MVC4+EasyUI的Web经验总结 easyui-treegrid onBeforeLoad

原创 2016年05月30日 15:25:45

后端URL
Emergency/GetPlanLog(int UserID, DateTime? startTime, DateTime? endTime, int page, int rows)//查询列表

Emergency/GetStepListByLogID(int LogID)//点击展开树列表

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>应急事件历史查询</title>
    <link href="../../App_Themes/Default/all.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript" src="../../Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../Scripts/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../../Scripts/myScript.js"></script>
    <script type="text/javascript">
        var ondate = new Date();
        var endDate = ondate.getFullYear() + "-" + (ondate.getMonth() + 1) + "-" + ondate.getDate() + " 23:59:59"; //开始时间
        var startDate = ondate.getFullYear() + "-" + (ondate.getMonth()) + "-" + ondate.getDate() + " 00:00:00"; //结束时间   往前一个月
        $(function () {
            $("#EmergencyList").treegrid({//加载树型表格用treegrid   //加载普通的显示列表用datagrid
                title: '应急事件历史列表',
                iconCls: 'icon-save',
                width: 'auto',
                height: 'auto',
                nowrap: false,
                rownumbers: true,//行号
                animate: true,
                collapsible: true,
                pagination: true,
                fitColumns: true, //True就会自动扩大或者缩小列的尺寸以适应表格的宽度并且防止水平滚动
                pageNumber: 1, //初始化页码
                pageSize: 10, //初始化尺寸
                url: '/Emergency/GetPlanLog?UserID=' + getCookie("UserID") + '&startTime=' + startDate + '&endTime=' + endDate + '&page=' + 1 + '&rows=' + 10,
                idField: 'ID',//列表数据中的主键
                treeField: 'PlanName',//定义数节点的字段    在这里在预案名称这里展开
                loadMsg: '正在加载数据,请稍后......',
                columns: [[
                { field: 'PlanName', width: 200, title: '预案名称', align: 'left' },
                { field: 'AreaName', width: 300, title: '发生区域', align: 'center' },
                { field: 'Address', width: 300, title: '详细地址', align: 'center' },
                { field: 'TypeName', width: 200, title: '预案类型', align: 'center' },
                { field: 'OperateTime', width: 200, title: '操作时间', align: 'center' }

                   ]],
                onBeforeLoad: function (row, param) {//onBeforeLoad发出一个加载数据的请求前触发
                    if (row) { $(this).treegrid('options').url = '/Emergency/GetStepListByLogID?LogID=' + row.ID; }//ID就给主键
                },
                onContextMenu: function (e, row) {//右键点击节点触发
                    e.preventDefault();
                    $(this).treegrid('unselectAll');
                    $(this).treegrid('select', row.ID);//主键
                    $('#mm').menu('show', { left: e.pageX, top: e.pageY });
                }
            });
            $('#table').resize(function () {
                $("#EmergencyList").treegrid("resize", { width: getWidth() });
            });

            function getWidth() {
                return $("#table").width() * 0.99;
            }
            $("#EmergencyList").datagrid('getPager').pagination({
                displayMsg: '当前显示从{from}到{to} 共{total}条记录',
                onSelectPage: function (pageNumber, pageSize) {
                    $("#EmergencyList").treegrid('options').url = '/Emergency/GetPlanLog?UserID=' + getCookie("UserID") + '&startTime=' + startDate + '&endTime=' + endDate + '&page=' + 1 + '&rows=' + 10,
                    $("#EmergencyList").treegrid('reload');
                }
            });
        });



        function SearchPlanlog() {//查询列表
            var endTime = $("#endTime").next().find("input").val(); //获取结束时间
            var startTime = $("#startTime").next().find("input").val();
            if (startTime == "" || startTime == "undefined") {
                $.messager.alert('列表查询', '请先选择开始查询时间,此项为必填项');
                return;
            } else if (endTime == "" || endTime == "undefined") {
                $.messager.alert('列表查询', '请先选择结束查询时间,此项为必填项!');
                return;
            } else {
                $("#EmergencyList").treegrid('options').url = '/Emergency/GetPlanLog?UserID=' + getCookie("UserID") + '&startTime=' + startTime + '&endTime=' + endTime + '&page=' + 1 + '&rows=' + 10,
                $("#EmergencyList").treegrid('reload');
            }

        }
        function getCookie(name) {
            var bikky = document.cookie;
            name += "=";
            var i = 0;
            //如果cookie 不为空则 循环截取出 相应 名称 的cookie值  
            while (i < bikky.length) {
                var offset = i + name.length;
                if (bikky.substring(i, offset) == name) {
                    var endstr = bikky.indexOf(";", offset);
                    if (endstr == -1) endstr = bikky.length;
                    return unescape(bikky.substring(offset, endstr));
                }
                i = bikky.indexOf(" ", i) + 1;
                if (i == 0) break;
            }
            return null;
        }

        //        $(function () {
        //            $('.easyui-datebox').datebox({
        //                formatter: function (date) { return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(); }
        //            });
        //            $("#cc").combotree({
        //                url: "/Area/GetAllAreaTree",
        //                idField: "Id",
        //                loadMsg: "正在加载数据,请稍候......",
        //                onBeforeExpand: function (node, param) {
        //                    if (node) {
        //                        $(this).tree('options').url = '/Area/GetAllAreaTree?Id=' + node.Id;
        //                    }
        //                },
        //                onSelect: function (node) {
        //                    if (node != null) {
        //                        $("#tt").tree({
        //                            url: "/Area/GetAllAreaTree?Id=" + node.id + "&type=1",
        //                            idField: "Id",
        //                            checkbox: true,
        //                            onlyLeafCheck: true,
        //                            onBeforeExpand: function (childnode, param) {
        //                                $(this).tree('options').url = '/Area/GetAllAreaTree?Id=' + childnode.Id + '&type=1';
        //                            },
        //                            onSelect: function (node) {

        //                            }
        //                        });
        //                    }
        //                }
        //            });
        //            InitEmergencyList();
        //            $('#table').resize(function () {
        //                $("#EmergencyList").datagrid("resize", { width: getWidth() });
        //            });
        //        });
        //        function getWidth() {
        //            return $("#table").width() * 0.99;
        //        } 
        //        function InitEmergencyList() {
        //            $("#EmergencyList").datagrid({
        //                title: '应急事件历史列表',
        //                iconCls: 'icon-save',
        //                width: 'auto',
        //                align: 'center',
        //                height: 'auto',
        //                nowrap: false,
        //                rownumbers: true,
        //                animate: true,
        //                collapsible: true,
        //                pagination: true,
        ////                pageList: [12],
        //                fitColumns: true, //True就会自动扩大或者缩小列的尺寸以适应表格的宽度并且防止水平滚动
        //                pageNumber: 1, //初始化页码
        //                pageSize: 10, //初始化尺寸
        //                url: '/Emergency/GetPlanLog', //查询的URL
        //                data: 'UserID=' + getCookie("UserID") + '&startTime=' + startDate + '&endTime=' + endDate + '&page=' + 1 + '&rows=' + 10,
        //                loadMsg: '正在加载数据,请稍候......',
        //                columns: [[
        //                  { field: 'PlanName  ', width: 150, title: '预案名称' },
        //                  { field: 'AreaName  ', width: 150, title: '发生区域' },
        //                  { field: 'Address   ', width: 380, title: '详细地址' },
        //                  { field: 'TypeName ', width: 380, title: '预案类型' },
        //                  { field: 'OperateTime ', width: 380, title: '操作时间' },

        ////                  { field: 'EmergencyType', width: 80, title: '应急类型', formatter: function (value) { if (value == 1) { return '火警'; } else { return '盗警'; } } },
        ////                  { field: 'EmergencyLevel', width: 80, title: '应急级别', formatter: function (value) { if (value == 1) { return '紧急'; } else if (value == 2) { return '重要'; } else { return '一般'; } } },
        ////                  { field: 'Summay', width: 300, title: '总结' },
        ////                  { field: 'Operate', width: 100, title: '操作',align:'center', formatter: function (value) {
        ////                      return '<div align=\"center\"><a href=\"#\" onclick=\"viewEmergencyHistory('+value+');\">查看</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"#\" onclick=\"deleteEmergencyHistory('+value+');\">删除</a></div>';
        ////                  }
        ////                  }
        //                ]]
        //            });
        //      }
        //      function deleteEmergencyHistory(id) {
        //          if (confirm('确认是否要删除该记录吗?')) {
        //              $.ajax({
        //                  type: "POST",
        //                  dataType: "json",
        //                  url: "/Emergency/DeleteEmergencyHistoryById",
        //                  data: "EmergencyID=" + id,
        //                  error: function (msg) { alert('Url加载错误!'); },
        //                  success: function (msg) {
        //                      if (msg.Result == 1) {
        //                          alert('删除操作已成功!');
        //                          $("#EmergencyList").datagrid('options').url = "/Emergency/SearchEmergencyHistoryList?areaId=" + $("#cc").combotree("getValue") + "&startTime=" + $("#startTime").datebox('getValue') + "&endTime=" + $("#endTime").datebox('getValue');
        //                          $("#EmergencyList").datagrid('reload');
        //                      }
        //                      else {
        //                          if (msg.Result == 0) {
        //                              alert('删除操作失败!');
        //                          }
        //                          else {
        //                              alert(msg.Result);
        //                          }
        //                      }
        //                  }
        //              });
        //          }
        //      }
        //      function SearchHistory() {
        //          $("#EmergencyList").datagrid('options').url = "/Emergency/SearchEmergencyHistoryList?areaId=" + $("#cc").combotree("getValue") + "&startTime=" + $("#startTime").datebox('getValue') + "&endTime=" + $("#endTime").datebox('getValue');
        //          $("#EmergencyList").datagrid('reload');
        //      }
        //      function viewEmergencyHistory(id) {
        //          window.location.href = '/Emergency/EmergencyHistoryStep?ID=' + id;
        //      }
    </script>
</head>
<body class="easyui-layout">
<div region="center" fit="true" title="应急事件历史查询" border="false" iconCls="icon-west2" headerCls="my-panel-header" id="table">
        <fieldset class="search">
        <legend>应急事件查询</legend>
            <form action="" method="get">
                <%--<label>所属地区:<input id="cc" class="easyui-combotree" style="width:200px;"/></label>--%>
                <%--<label>开始时间:<input type="text" id="startTime" class="easyui-datebox"/></label>--%>
                <%--<label>结束时间:<input type="text" id="endTime" class="easyui-datebox" /></label>--%>
                       <label>时间段:<input type="text" class="easyui-datetimebox" id="startTime" style="width:160"/></label>
                       <label></label>
                       <label><input type="text" class="easyui-datetimebox" id="endTime"   style="width:160"/></label>
                <a href="javascript:void(0)" onclick="SearchPlanlog()" class="easyui-linkbutton" iconCls="icon-watch">查询</a>
            </form>
        </fieldset>
        <table class="nomal" id="EmergencyList">
        </table>
</div>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JS刷新页面后滚动条的位置不变

有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好...

asp.net MVC使用treegrid——jqwidgets插件

jqwidgets官网  http://www.jqwidgets.com 官网是全英文的,暂时还不支持中文,但是本地化里面竟然有日文的,这让我很想不通。中国这么大的市场为啥不做?不说废话了,下面开...

2014/3/14 easyUI中treeGrid json数据格式

在使用easyUI 的treeGrid的时候,很多时候我们从数据库取出来的数据treeGrid却不能读取显示成一个树:如下 { menuCode: "a00", menuName: "管理员首页", ...

EasyUI treegrid 生成json格式的方法

/*将一般的JSON格式转为EasyUI TreeGrid树控件的JSON格式 * @param rows:json数据对象 * @param idFieldName:表id的字段名 * @param...

EasyUI的TreeGrid应用

权限系统的菜单管理采用了EasyUI的TreeGrid,实现了菜单管理的新增、删除、修改、初始化、拖拽改变顺序或层级等,贴出代码: 1、view页面 $(function...

jQuery AJAX获取JSON数据解析多种方式示例

本文出自:http://blog.csdn.net/haiqiao_2010/article/details/12653555 <html xmlns="h

C# 使用easyUI datagrid 实现后台分页

easyUI datagrid的分页功能

基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用

因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因。 如有冒犯请联系本人,或删除,或标明出处。 因为好的文章,以前只想收藏,但连接有时候...

easyUI treegrid的使用

前段时间,实习时候接到一个任务,jiang
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)