jquery数据库在线查询条件编辑器QueryBuilder使用经验

最近在参考网站http://www.html580.com/11671/demo及http://querybuilder.js.org/demo.html在项目中添加了一个查询条件编辑器，在部分IE9中总是不能正常显示，一开始以为是“query-builder.standalone.min.js”与IE9的兼容性问题，后来发现部分电脑IE11也有问题，折腾了好久不能解决。

经过反复尝试，最后发现在head标签中增加以下内容即可解决：

<meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8">

 

。我测试用的是asp.net，在母版页中增加了上述内容，经测试可以解决。

 

要在页面上实现以下效果，经测试至少需要引用以下文件（相应的文件大家可以到上面两个网站中找对应的链接下载）：

<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/query-builder.default.min.css" rel="stylesheet"/>

<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>

<script src="js/query-builder.standalone.min.js" type="text/javascript"></script>
<script src="js/sql-parser.js" type="text/javascript"></script> 

 

以下js代码供大家参考

function build(rules_basic) {
    $('#builder-import_export').queryBuilder({
      plugins: ['bt-tooltip-errors'],
 
      filters: [{
        id: 'Name',
        label: 'Name',
        type: 'string',
        operators: ['equal', 'not_equal','begins_with', 'contains']
      }, {
        id: 'ID',
        label: 'ID',
        type: 'string',
        operators: ['equal', 'not_equal', 'begins_with','contains']
      }],
    rules: rules_basic
    });
    if(!rules_basic)
    {
   
        $('#builder-import_export').queryBuilder('reset');
       
    }
}
window.onload = function () {
    var rules =<%=Num%>;
    build(rules);
}

=<%=Num%>是一个页面的属性，初始化赋值为null时，应这样写this.Num = "null";在页面上查看源代码时，变成这样了var rules =null;这样就对了。