一个老项目需要添加一个新的需求：动态查询数据库里存在的表和视图。
实现效果
直接上代码
html
<link rel="stylesheet" type="text/css" href="../Styles/table/bootstrap-table.min.css" media="screen" />
<script src="../Scripts/table/bootstrap-table.min.js"></script>
<script src="../Scripts/table/bootstrap-table-zh-CN.min.js"></script>
<link rel="stylesheet" type="text/css" href="../Styles/pager/normalize.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../Styles/pager/pagination.css" media="screen" />
<%--<link rel="stylesheet" type="text/css" href="../Styles/pager/common.css" media="screen" />--%>
<div class="content">
<div class="Box BoxHead detail-block">
<div class="form-inline" style="margin: 3px; padding: 3px;">
<div class="form-group">
<label id="Label1" runat="server">选择视图：</label>
<select id="SView" class="form-control" onchange="selectOnchang(this)">
</select>
</div>
</div>
<div id="condition">
<%--生成查询条件--%>
</div>
<div class="form-group" id="qbt" style="display: none; width: 100%; text-align: center;">
<button type="button" class="btn btn-default" style="margin: 0 auto;" onclick="querytable()">查询</button>
</div>
</div>
<div class="panel panel-info">
<div style="overflow: auto" id="layoutRows">
<%--这里生成表格--%>
<table class="table" id="table1">
</table>
<div class="M-box" style="padding:5px;"></div>
</div>
</div>
</div>js
<script src="../Scripts/pager/jquery.pagination.js"></script>
<script type="text/javascript">
var json;
var orderby;
var pagesize;
$(document).ready(function () {
$.ajax({
url: "../QueryViewConfig/QueryViewConfig.json?id=12",
type: "GET",
dataType: "json",
success: function (data) {
json = data;
//alert(json.name)
$("#SView").append("<option value='999'>请选择视图</option>");//绑定视图下拉框
$.each(data.view, function (index, item) {
$("#SView").append("<option value=" + item.view + ">" + item.name + "</option>");//绑定视图下拉框
});
}
})
})
function selectOnchang(obj) {
//获取被选中的option标签选项
var value = obj.options[obj.selectedIndex].value;
if (value != "" && value != "999") {
$.each(json.view, function (index, item) {
if (item.view == value) {
orderby = item.orderby;
pagesize = item.pagesize
$("#condition").html("");
var i = 1;
var html = "";
$.each(item.condition, function (index, childitem) {
//alert(childitem.name)
//动态绑定查询条件ZS_V_采购订单
if (i % 3 == 1) {
html = html + "<div class='form-inline' style='margin: 3px; padding: 3px'>";
}
html = html + "<div class='form-group'>"
html = html + " <label>" + childitem.name + "：</label>"
if (childitem.type == "datetime") {//日期
html = html + " <input type='text' class='form-control Wdate' onclick='WdatePicker()' data='" + childitem.value + "' type='datetime' mode='" + childitem.mode + "' />"
} else if (childitem.type == "textbox") {//文本
html = html + "<input type='text' class='form-control' data='" + childitem.value + "' mode='" + childitem.mode + "' type='datetime' />"
} else if (childitem.type == "select") {//下拉
html = html + "<select class='form-control' data='" + childitem.value + "' type='" + childitem.type + "' >"
html = html + "<option value='999' >全部</option>"
$.each(childitem.option, function (index, optionitem) {
html = html + "<option value='" + optionitem.value + "' >" + optionitem.name + "</option>"
});
html = html + "</select>"
}
html = html + "</div>"
if (i % 3 == 0) {
html = html + "</div>";
}
i++;
});
$("#condition").append(html)
$("#qbt").show()
$("#tabl1").html("")
}
autoheight()
});
}
}
function createtable(pageindex) {
var jsonstr = "[]";
var jsonarray = eval('(' + jsonstr + ')');
$("#condition .form-control").each(function () {
//组合条件
// alert($(this).val() + " " + $(this).attr("data"))
//调用接口返回绑定数据 这里带分页
//生成条件参数集合
var item = {
"name": $(this).attr("data"),
"value": $(this).val(),
"mode": $(this).attr("mode"),
"type": $(this).attr("type")
};
jsonarray.push(item);
})
var formdata = {
"viewname": $("#SView").val(),
"condition": jsonarray,
"orderby": orderby,
"pagesize": pagesize,
"pageindex": pageindex
};
// 加载动态表格
$.ajax({
url: "ViewTable.ashx",
data: JSON.stringify(formdata),
type: 'post',
dataType: "text",
success: function (data) {
//alert(data)
var dataJson = eval('(' + data + ')');//总数据集
var columnstr = "[]";
var columnarray = eval('(' + jsonstr + ')');//表头数据集
// 未查询到相应的列，展示默认列
if (dataJson.success != "ok") {
//没查到列的时候把之前的列再给它
alert("没有查询到数据");
} else {
// 异步获取要动态生成的列
var rows = dataJson.rows;
//获得第一个数据
var line = rows[0];
for (var item in line) {
if (item.indexOf("date") > 0 || item.indexOf("时间") > 0) {
columnarray.push({
"field": item,
"title": item,
"align": 'center',
"valign": 'middle',
formatter: function (value, row, index) {
return value.replace("T", " ")
}
});
} else {
columnarray.push({
"field": item,
"title": item,
"align": 'center',
"valign": 'middle'
});
}
}
//初始化table
$('#table1').bootstrapTable('destroy').bootstrapTable({
data: dataJson.rows,
columns: columnarray
})
}
}
});
}
function querytable() {
var jsonstr = "[]";
var jsonarray = eval('(' + jsonstr + ')');
$("#condition .form-control").each(function () {
//组合条件
// alert($(this).val() + " " + $(this).attr("data"))
//调用接口返回绑定数据 这里带分页
//生成条件参数集合
var item = {
"name": $(this).attr("data"),
"value": $(this).val(),
"mode": $(this).attr("mode"),
"type": $(this).attr("type")
};
jsonarray.push(item);
})
var formdata = {
"viewname": $("#SView").val(),
"condition": jsonarray,
"orderby": orderby,
"pagesize": pagesize
};
$.ajax({
url: "GetPageTotal.ashx",
data: JSON.stringify(formdata),
type: 'post',
dataType: "text",
success: function (data) {
//alert(data)
var dataJson = eval('(' + data + ')');//总数据集
var columnstr = "[]";
var columnarray = eval('(' + jsonstr + ')');//表头数据集
// 未查询到相应的列，展示默认列
if (dataJson.success != "ok") {
//没查到列的时候把之前的列再给它
alert("没有查询到数据");
} else {
var pi = parseInt(dataJson.total / pagesize)
//alert(pi)
$('.M-box').pagination({
pageCount: pi,
callback: function (api) {
// alert(api.getCurrent())
createtable(api);
autoheight()
}
}, function (api) {
// alert(api.getCurrent())
createtable(api);
autoheight()
});
}
}
});
}
function autoheight() {
if ($("#layoutRows").offset() == null || typeof ($("#layoutRows").offset()) == undefined) {
return;
}
var rowsHeight = document.body.clientHeight - $("#layoutRows").offset().top - 10;
if (parseInt(rowsHeight) <= 0) {
rowsHeight = 600;
}
$('#layoutRows').css({ 'height': rowsHeight + 'px' });
}配置的JSON文件
{
"view": [
{
"name": "采购订单", //中文名
"view": "ZS_V_采购订单", //要查询的视图名字
"pagesize": 10, //查询分页每页记录数
"orderby": "docdate desc", //按字段排序
"condition": [ //自定义查询条件
{
"name": "开始日期", //中文名
"value": "docdate", //对应字段名
"type": "datetime", //查询控件类型（datetime，textbox，select）
"mode": "begintime" //时间查询开始日期
},
{
"name": "结束时间",
"value": "docdate",
"type": "datetime",
"mode": "endtime" //时间查询开始日期
},
{
"name": "供应商名称",
"value": "cardname",
"type": "textbox", //文本查询
"mode": "like" //模糊查询的话填like,默认可不填
},
{
"name": "zs_release",
"value": "zs_release",
"type": "select", //下拉框查询
"option": [ //下拉项
{
"name": "是",
"value": true
},
{
"name": "否",
"value": false
}
]
}
]
},
{
"name": "发料单",
"view": "ZS_V_发料单",
"pagesize": 10,
"orderby": "工单号 desc",
"condition": [
{
"name": "物料编码",
"value": "物料编码",
"type": "textbox",
"mode": ""
}
]
}
]
}