js-grid实现模糊查询

js-grid是国外的一款非常开放和自由的前段框架，与其说是前段框架不如更准确一点说是表格框架，它的表格功能强大并且支持自定义。

进来开发使用它比较多，现在就来记录一下昨天学习的js-grid的模糊查询

首先打开网址:http://js-grid.com/demos/

我们可以看到各种demo，你们可以一一试试，然后参考一下它的源码。

今天我要记录的是模糊查询，效果如下

这是怎么实现的呢？我们来看一下它的源码,经过本人卓越的英语，我发现了一个重要的单词:

没错，就是它 , filter 中文意思为:筛选，已经但是光靠这一句是没法使用的，显然他没能和查询关联到一起，我们再翻一翻开发文档:

发现了这句话， filter是作为参数传递给controller里loadData这个方法的，对这句话我简单的解释一下:

$(function() {

	    $('.employpage').jsGrid({
	        height: "437",
	        width: "100%",
	        filtering: true,//允许筛选
	        sorting: true,
	     	autoload: true,
	     	paging:true,
	     	pageLoading:true,
	     	editing:false ,
	     	pageSize: 9,
	        pageIndex: 1, 
	        deleteConfirm :"是否确认删除？",
	        pagerFormat: "{first} {prev} {pages} {next} {last}   第  {pageIndex} 页/共  {pageCount} 页",
	        pagePrevText: "上一页",
            pageNextText: "下一页",
            pageFirstText: "首页",
            pageLastText: "尾页",
           
            
      	controller: {
      		loadData: function(filter) {
      			
      			
                return $.ajax({
                	url:'${pageContext.request.contextPath}/employ/findAllEmployee',
                	data:filter,
                	type:'post',
                	dataType: "json"
                });        
            }
},
	        fields: [
	             { name: "empno", title: '员工号',width:30,type :'text'},
	             { name: "empname", title: '姓名' ,width: 40,type :'text' },
	             { name: "sex", title:'性别' ,width: 20,type :'text' },
	            //给第三列加上方法
	             { name: "state", title: '状态',type :'text',  width: 30 }, 
	             { name: "domain", title: '领域',type :'text'},
	             { name: "depName", title: '所在部门',type :'text',width:60},
	             { name: "positionName", title: '职位',type :'text',width:60},
	             { name: "mobile", title: '电话',type :'text',width:50}
}

以上是一个简单的显示表格,没有删除方法没有修改方法，没有点击事件。表格的数据来自于:

	controller: {
      		loadData: function(filter) {
      			
      			
                return $.ajax({
                	url:'${pageContext.request.contextPath}/employ/findAllEmployee',
                	data:filter,
                	type:'post',
                	dataType: "json"
                });        
            }
}

loadData是表格加载数据的方法，filter是可以接收参数的，而ajax请求的url则是

${pageContext.request.contextPath}/employ/findAllEmployee

也就是说，只要这个url如果能支持多重条件模糊查询的话！无论filter里面有什么参数都可以得出结果，我们需要写一个能支持多重条件查询的sql。有条件则根据条件查，没有条件则查询全部

js-grid实现模糊查询

猜你喜欢