VBDSM
/
UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>原材料管理</title>
		<link href="http://static.vbdsm.com/js/lib/easyui/themes/vber/easyui.css" rel="stylesheet" type="text/css" />
		<link href="http://static.vbdsm.com/js/lib/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
		<link href="http://static.vbdsm.com/js/lib/loadmask/jquery.loadmask.css" rel="stylesheet" type="text/css" />
		<script src="http://static.vbdsm.com/js/lib/jquery-1.8.0.min.js" type="text/javascript"></script>
		<script src="http://static.vbdsm.com/js/lib/easyui/jquery.easyui.min.js" type="text/javascript"></script>
		<script src="http://static.vbdsm.com/js/lib/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
		<script src="http://static.vbdsm.com/js/lib/loadmask/jquery.loadmask.min.js" type="text/javascript"></script>
		<script src="http://static.vbdsm.com/js/lib/highcharts/highcharts.js?v=4.1.8" type="text/javascript"></script>
		<script src="http://static.vbdsm.com/js/lib/highcharts/modules/exporting.js?v=4.1.8" type="text/javascript"></script>
		<script src="http://static.vbdsm.com/js/util.js" type="text/javascript"></script>
		<script src="http://static.vbdsm.com/js/lib/layer/layer/layer.js" type="text/javascript"></script>
		<style type="text/css">
			#menu_left * {
				vertical-align: middle;
			}
		</style>

		<script charset="UTF-8" type="text/javascript"></script>
	</head>
	<body class="easyui-layout" data-options="fit:true, border:false,plain:true">
		<div data-options="region:'center'" id="center" style="border-top: none; border-bottom: none">
			<div id="menu_left" style="padding: 2px; background-color: #eee; border-bottom: solid 1px #ddd">
				<a class="easyui-linkbutton easyui-tooltip" data-options="plain:true, iconCls:'icon-add'" id="btnAdd" title="添加信息">新增</a>
				<a class="easyui-linkbutton easyui-tooltip" data-options="plain:true, iconCls:'icon-edit'" id="btnUpdate" title="修改信息">修改</a>
				<a class="easyui-linkbutton easyui-tooltip" data-options="plain:true, iconCls:'icon-remove'" id="btnDelete" title="删除信息">删除</a>
				<a class="easyui-linkbutton easyui-tooltip" data-options="iconCls:'icon-save', plain:true" id="btnSave" title="保存信息">保存</a>
				<a class="easyui-linkbutton easyui-tooltip" data-options="iconCls:'icon-undo', plain:true" id="btnCancel" title="取消当前操作">取消</a>
			</div>
			<table id="dg" style="width: 100%"></table>
		</div>
	</body>
	<script type="text/javascript">
		var editFlag = true,
			appendFlag = true,
			editIndex
		$(document).ready(function () {
			loadData()
			$("#btnAdd").on("click", function () {
				if (!appendFlag || !editFlag) {
					layer.msg("请先取消正在更改或者新增的行！", {
						icon: 4,
					})
					return
				}
				$("#dg").datagrid("appendRow", {})
				editIndex = $("#dg").datagrid("getRows").length - 1
				$("#dg").datagrid("selectRow", editIndex).datagrid("beginEdit", editIndex)
				appendFlag = false
			})

			$("#btnSave").on("click", function () {
				if (appendFlag && editFlag) {
					layer.msg("没有需要保存或者更新的行！")
					return
				}
				var flag = $("#dg").datagrid("validateRow", editIndex)
				if (!flag) {
					layer.msg("请填写完整的信息！")
					return
				}
				$("#dg").datagrid("acceptChanges")
				$("#dg").datagrid("selectRow", editIndex)
				var row = $("#dg").datagrid("getSelected")
				var url = "",
					type = 1
				if (row["id"]) {
					url = "/web/sysMaterial/update.json"
					type = 2
				} else {
					url = "/web/sysMaterial/save.json"
				}
				saveOrUpdate(url, row, type)
				;(editFlag = true), (appendFlag = true)
			})

			function saveOrUpdate(url, row, type) {
				ajax({
					url: url,
					data: row,
					type: "POST",
					beforeSend: function (XHR) {
						$("#dg").mask("数据加载中...")
					},
					success: function (data) {
						$("#dg").unmask()
						if (data["status"] == 1) {
							if (type == 1) {
								layer.msg("  保存成功", {
									icon: 1,
								})
								$("#dg").datagrid("updateRow", {
									index: editIndex,
									row: data["data"],
								})
							} else {
								layer.msg("  更新成功", {
									icon: 1,
								})
							}
						} else {
							if (type == 1) {
								layer.msg("  保存失败", {
									icon: 1,
								})
							} else {
								layer.msg("  更新失败", {
									icon: 1,
								})
							}
						}
					},
					error: function () {
						$("#dg").unmask()
						if (type == 1) {
							layer.msg("  服务器发生错误，保存失败", {
								icon: 1,
							})
						} else {
							layer.msg("  服务器发生错误，更新失败", {
								icon: 1,
							})
						}
					},
				})
			}

			$("#btnCancel").on("click", function () {
				if (editIndex != undefined) {
					$("#dg").datagrid("cancelEdit", editIndex)
					if (!appendFlag) {
						$("#dg").datagrid("deleteRow", editIndex)
						appendFlag = true
					}
					editIndex = undefined
					editFlag = true
				}
			})
			$("#btnUpdate").click(function () {
				if (!appendFlag || !editFlag) {
					layer.msg("请先取消正在更改或者新增的行！", {
						icon: 4,
					})
					return
				}
				var row = $("#dg").datagrid("getSelected")
				if (row == null || row == undefined) {
					layer.msg("  请选择一条记录进行修改.", {
						icon: 4,
					})
					return
				}
				var index = $("#dg").datagrid("getRowIndex", row)
				editIndex = index
				$("#dg").datagrid("beginEdit", editIndex)
				editFlag = false
			})

			$("#btnDelete").click(function () {
				if (!appendFlag || !editFlag) {
					layer.msg("请先取消正在更改或者新增的行！", {
						icon: 4,
					})
					return
				}
				var checkedItem = $("#dg").datagrid("getSelected")
				if (checkedItem != undefined) {
					layer.confirm("删除后,将导致某些关联数据无法显示。<br/>您确定要删除选中数据吗?", function (index) {
						layer.close(index)
						ajax({
							url: "/web/sysMaterial/delete.json",
							data: {
								id: checkedItem.id,
							},
							success: function (data) {
								if (data["status"] == 1) {
									var rowIndex = $("#dg").datagrid("getRowIndex", checkedItem)
									$("#dg").datagrid("deleteRow", rowIndex)
									layer.msg("  删除成功", {
										icon: 1,
									})
								} else {
									layer.msg("  删除失败", {
										icon: 2,
									})
								}
							},
							error: function () {
								layer.msg("服务器存在问题,删除失败", {
									icon: 2,
								})
							},
						})
					})
				} else {
					layer.msg("  请选择一条要删除的记录!", {
						icon: 4,
					})
					return
				}
			})
		})

		var type

		var tableObj = $("#dg")

		//分页控件
		function loadData() {
			//获取DataGrid分页组件对象
			var p = tableObj.datagrid("getPager")
			//设置分页组件参数
			$(p).pagination({
				pageSize: 20,
				pageNumber: 1,
				pageList: [10, 20, 50],
				onSelectPage: function (pageNumber, pageSize) {
					getData(pageNumber, pageSize)
				},
			})
			var obj = $(p).pagination("options")
			getData(obj.pageNumber, obj.pageSize)
		}

		function getData(pageNumber, pageSize) {
			if (pageNumber == 0) {
				pageNumber = 1
			}
			ajax({
				url: "/web/sysMaterial/getForPage.json",
				type: "post",
				dataType: "json",
				data: { pageSize: pageSize, pageNo: pageNumber },
				beforeSend: function (XHR) {
					$("#dgDiv").mask("数据加载中...")
				},
				success: function (data) {
					$("#dgDiv").unmask()
					tableObj.datagrid("loadData", data.data)
				},
			})
		}

		tableObj.datagrid({
			toolbar: "#menu_left",
			fit: true,
			fitcolumns: true,
			pagination: true,
			pageSize: 20,
			rownumbers: true,
			singleSelect: true,
			selectOnCheck: false,
			checkOnSelect: true,
			columns: [
				[
					{
						field: "id",
						hidden: true,
					},
					{
						field: "materialName",
						title: "材料名称",
						width: 130,
						align: "center",
						editor: {
							type: "text",
							options: {
								required: true,
							},
						},
					},
					{
						field: "unit",
						title: "单位",
						width: 130,
						align: "center",
						editor: {
							type: "text",
							options: {
								required: true,
							},
						},
					},
					{
						field: "remark",
						title: "说明",
						width: 130,
						align: "left",
						editor: {
							type: "text",
							options: {
								required: true,
							},
						},
					},
				],
			],
		})
	</script>
</html>