说明
最近在给老项目做各种新功能,其中一项是给数据添加各种用户自定义的查询,但是用户不会写SQL,我们得用图形化界面才能让他操作啊o(╥﹏╥)o,上网一搜,发现有我需要的东西->jQuery-QueryBuilder(还有一个国产的和这个很像,但很久没更新了不敢用->BuilderDynmic),实现效果类似下面
点击确定直接返回下面的查询条件(可以直接拼到where)
快速开始
在这个例子中我的左边是一棵树,点击树加载右边table(字段不定),jQuery-QueryBuilder对JQ版本是有要求的具体查看自己的版本,错误的话控制台会有提示,注意引入query-builder.zh-CN.js就能实现中文了,我把我用到的所有js和css都打包了,戳->七牛云下载,戳->CSDN下载
filters请求得到的数据格式如下
[{
"id": "aa",
"type": "string",
"label": "安安"
}, {
"id": "bb",
"type": "string",
"label": "版本"
}, {
"id": "id",
"type": "string",
"label": "id"
}]
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<script type="text/javascript" src="./js/jquery-1.12.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.mobile.js"></script>
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/query-builder.standalone.js"></script>
<script type="text/javasc