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;这样就对了。