MVC4+EasyUI的Web经验总结 easyui-treegrid onBeforeLoad
后端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> <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>
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： jquery easyui 技巧整理
- 下一篇： jquery easyui datagrid使用参考
