最近在参考网站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;这样就对了。