easy UI datagrid加载的时候默认不加载数据

最新推荐文章于 2024-04-26 10:32:54 发布

weixin_34115824

最新推荐文章于 2024-04-26 10:32:54 发布

阅读量664

点赞数 1

文章标签： ui java javascript ViewUI

原文链接：https://my.oschina.net/chinasoftzhou/blog/693418

版权

2019独角兽企业重金招聘Python工程师标准>>>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<jsp:include page="../inc.jsp"></jsp:include>
<meta http-equiv="X-UA-Compatible" content="edge" />
<title>收入合同管理</title>
	<script type="text/javascript">
	var dataGrid;
	$(function() {
		//查询列表	
		dataGrid = $('#dataGrid').datagrid({
			url : '',
			striped : true,
			rownumbers : true,
			pagination : true,
			singleSelect : true,
			fitColumns: true,
			nowrap : false,
			idField : 'id',
			sortName : 'id',
			sortOrder : 'asc',
			pageSize : 20,
			pageList : [ 15, 20, 30 ],
			columns : [[{width : $(this).width() * 0.1,title : '合同名称',field : 'contactName',align : 'center',sortable : true}, 
						{width : $(this).width() * 0.1,title : '合同号',field : 'contactCode',align : 'center',sortable : true},
						{width : $(this).width() * 0.1,title : '合同额(万元)',field : 'contactAmount',align : 'center',sortable : true},
						{width : $(this).width() * 0.1,title : '合同签订日期',field : 'created',align : 'center',sortable : true},
						{width : $(this).width() * 0.12,title : '供应商',field : 'erpName',align : 'center'}
					]],
			toolbar : '#toolbar'
		});
	});

	//搜索
	function searchFun() {
		var options = dataGrid.datagrid('options');
		//获取查询参数
		var contactName=$('[name="contactName"]').val();
		var erpCode=$('[name="erpCode"]').val();
		var contactCode=$('[name="contactCode"]').val();
		//url 需要自己定义
		options.url = '${ctx}' + '/XXXX/XXXXX';
		options.queryParams = { 
				contactName: contactName, 
				erpCode: erpCode, 
				contactCode:contactCode 
		};
		//触发搜索
		dataGrid.datagrid(options);
	}
	
	//重置
	function reloadFun() {
		$("#contactName").val("");
		$("#erpCode").val("");
		$("#contactCode").val("");
		//刷新查询
		dataGrid.datagrid('reload');
		dataGrid.datagrid('clearChecked');
	}
	</script>
</head>
<body class="easyui-layout" data-options="fit:true,border:false">
	
	<div data-options="region:'center',fit:true,border:false">
		<table id="dataGrid" data-options="fit:true,border:false"></table>
	</div>

	<div id="toolbar" style="display: none;" class="datagrid-toolbar">
		<table data-options="fit:true,border:false">
			<tr>
				<td>合同名称</td>
				<td><input id="contactName" name="contactName" type="text" placeholder="请输入合同名称" class="span2" value=""/></td>
				<td>ERP编号</td>
				<td><input id="erpCode" name="erpCode" type="text" placeholder="请输入ERP编号" class="span2" value=""/></td>
				<td>合同编号</td>
				<td><input id="contactCode" name="contactCode" type="text" placeholder="请输入合同编号" class="span2" value=""/></td>
			</tr>
		</table>
		<a onclick="searchFun();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-search'">查询</a>
		<a onclick="reloadFun();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'">重置</a>
	</div>
</body>
</html>

转载于:https://my.oschina.net/chinasoftzhou/blog/693418