10-EasyUI尚硅谷-combogrid+自动搜索功能

效果：

　　　　

选择下拉框，弹出datagrid列表，选中一条记录，把用户名填充到文本框中，还可以在文本框中输入关键字，根据用户名模糊查询记录

实现：

前台：

<body>
	<!-- combogrid自动搜索 -->
	<input id="search"/>
</body>


<script type="text/javascript">
	$(function() {
		$("#search").combogrid({
			width: 400,			// 下拉框的宽度
			mode: "remote",		// 从远程URL查询数据返回
			url: "UserServlet?method=searchName",	// 远程请求地址
			valueField: "id",			// 文本框的值
			textField: "username",		// 文本框显示的值
			columns: [[{				// combogrid的datagrid列表，二位数组
				field: "username", title: "用户名", width: 100 	// field和pojo一致，title是显示的表头，width是列宽度，不带px
			},{
				field: "sex", title: "性别", width: 50, formatter: function(value, record, index) {
					if (value == 1) {		// 格式化数据，1为男，2为女，并返回响应的样式
						return "<span style='color: red;'>男</span>";
					} else {
						return "<span style='color: green;'>女</span>";
					}
				} 
			},{
				field: "salary", title: "薪水", width: 50 
			},{
				field: "description", title: "描述", width: 150 
			}]]
		});
	});
</script>

 后台：

同前一节，通过用户名模糊查询结果集返回json字符串

 

posted @ 2017-08-01 12:07  半生戎马，共话桑麻、  阅读(626)  评论(0)    收藏  举报
levels of contents