@{
ViewBag.Title = "Index2";
}
json文件：
{
"total":25,
"rows":[
{
"id":1,
"Name":"xiaoming1",
"Mobile":"222",
"Note":"diyihang"
},
{
"id":2,
"Name":"xiaoming2",
"Mobile":"3333",
"Note":"dier"
},
{
"id":3,
"Name":"xiaoming2",
"Mobile":"34444",
"Note":"didssssss"
}
,
{
"id":4,
"Name":"xiaoming4",
"Mobile":"6555544",
"Note":"did5555ss"
}
]
}
<script src="~/Content/bootstrap/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="~/Content/bootstrap/css/bootstrap.min.css">
<script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="~/Content/bootstraptable/bootstrap-table.css">
<script src="~/Content/bootstraptable/bootstrap-table.js"></script>
<script src="~/Content/bootstraptable/extensions/editable/bootstrap-table-editable.js"></script>
<--汉化文件 -->
<script src="~/Content/bootstraptable/locale/bootstrap-table-zh-CN.js"></script>
<--table-->
<table id="table2"></table>
<--grid-->
<table id="grid"></table>
<--list-->
<table id="_list"></table>
<script type="text/javascript" >
$('#table2').bootstrapTable({
url: '/data1.json',
columns: [{
field: 'id',
title: '序号'
}, {
field: 'name',
title: '名称'
}, {
field: 'price',
title: '价格'
}, ]
});
//
var $table;
//初始化bootstrap-table的内容
// function InitMainTable() {
//记录页面bootstrap-table全局变量$table，方便应用
// var queryUrl = '/TestUser/FindWithPager?rnd=' + Math.random()
var queryUrl = '/data3.json';
// $table =
$('#grid').bootstrapTable({
url: queryUrl, //请求后台的URL（*）
method: 'GET', //请求方式（*）
//toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: false, //是否显示分页（*）
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页,并记录
//rows
pageSize: 2, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: false, //是否显示表格搜索
strictSearch: true,
showColumns: true, //是否显示所有的列（选择显示的列）
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
//height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识，一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
//得到查询的参数
queryParams: function (params) {
//这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
var temp = {
rows: params.limit, //页面大小
page: (params.offset / params.limit) + 1, //页码
sort: params.sort, //排序列名
sortOrder: params.order //排位命令（desc，asc）
};
return temp;
},
columns: [
{
checkbox: true,
visible: true //是否显示复选框
},
{
field: 'Name',
title: '姓名',
sortable: true
}, {
field: 'Mobile',
title: '手机',
sortable: true
},
{
field: 'Note',
title: '备注'
},
{
field: 'id',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter
}, ],
onLoadSuccess: function () {
},
onLoadError: function () {
showTips("数据加载失败！");
},
onDblClickRow: function (row, $element) {
var id = row.ID;
EditViewById(id, 'view');
},
});
// };
//
function actionFormatter(value, row, index) {
var id = value;
var result = "";
result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
return result;
}
/*
queryParams : function (params) {
//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
var temp = $("#ffSearch").serializeJsonObject();
temp["rows"] = params.limit; //页面大小
temp["page"] = (params.offset / params.limit) + 1; //页码
temp["sort"] = params.sort; //排序列名
temp["sortOrder"] = params.order; //排位命令（desc，asc）
//特殊格式的条件处理
temp["WHC_Age"] = $("#WHC_Age").val() + "~" + $("#WHC_Age2").val();
temp["WHC_BirthDate"] = $("#WHC_BirthDate").val() + "~" + $("#WHC_BirthDate2").val();
return temp;
},
//连接字段格式化
function linkFormatter(value, row, index) {
return "<a href='" + value + "' title='单击打开连接' target='_blank'>" + value + "</a>";
}
//Email字段格式化
function emailFormatter(value, row, index) {
return "<a href='mailto:" + value + "' title='单击打开连接'>" + value + "</a>";
}
//性别字段格式化
function sexFormatter(value) {
if (value == "女") { color = 'Red'; }
else if (value == "男") { color = 'Green'; }
else { color = 'Yellow'; }
return '<div style="color: ' + color + '">' + value + '</div>';
}
*/
window.onload = dosearch();
///加载抽检列表
function dosearch() {
//先销毁表格
$("#_list").bootstrapTable('destroy');
//初始化表格,动态从服务器加载数据
$("#_list").bootstrapTable({
method: "get", //使用get请求到服务器获取数据
contentType: "application/x-www-form-urlencoded",//一种编码。好像在post请求的时候需要用到。这里用的get请求，注释掉这句话也能拿到数据
// url: "ReportControl.ashx", //获取数据的Servlet地址
url: "/data3.json",
dataType: "json",
dataField: "rows",//这是返回的json数组的key.默认好像是"rows".这里只有前后端约定好就行
//height: tableHeight(),//高度调整
//striped: true, //表格显示条纹
pagination: false, //启动分页
pageNumber: 1, //当前第几页
pageSize: 300, //每页显示的记录数
pageList: [5, 10, 20, 30],//分页步进值
clickToSelect: true,//是否启用点击选中行
locale: 'zh-CN',//中文支持,
paginationPreText: '<',//指定分页条中上一页按钮的图标或文字,这里是<
paginationNextText: '>',//指定分页条中下一页按钮的图标或文字,这里是>
search: false, //是否启用查询
showColumns: false, //显示下拉框勾选要显示的列
showRefresh: false, //显示刷新按钮
sidePagination: "server", //表示服务端请求
//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
//设置为limit可以获取limit, offset, search, sort, order
queryParamsType: '',//查询参数组织方式
idField: "ID",//指定主键列
queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的
return {//这里的params是table提供的
pagesize: params.pageSize, //每页多少条数据
pageindex: params.pageNumber, //请求第几页
/*
budgetyear: escape($("#inBudgetYear").val()),
budgetmonth1: escape($("#inBudgetMonth1").val()),
budgetmonth2: escape($("#inBudgetMonth2").val()),
budgetcompany: escape($("#inBudgetCompany").val()),
departid: escape($("#h_newDepart").val()),
execdepart: $('#inResult1').is(':checked'),
companyin: $('#inResult2').is(':checked')
*/
};
},
//请求服务器时所传的参数
onLoadSuccess: function () { //加载成功时执行
// layer.msg("加载成功");
mergeTable("Name");
},
onLoadError: function () { //加载失败时执行
// layer.msg("加载数据失败", { time: 1500, icon: 2 });
},
columns: [
{
checkbox: true
}, {
title: '序号',//标题 可不加
formatter: function (value, row, index) {
return index + 1;
}
}, {
field: "id",
title: "ID",
visible: false, //是否显示
}, {
field: "Name",
title: "名称",
}, {
field: "Mobile",
title: "手机"
}, {
field: "Note",
title: "备注"
}
]
});
}
/*
//可以加多个
$('#table').bootstrapTable('mergeCells', {
index : 0,
field : "pairs_all",
rowspan : data.length
});
*/
function mergeTable(field) {
$table = $("#_list");
var obj = getObjFromTable($table, field);
for (var item in obj) {
$('#_list').bootstrapTable('mergeCells', {
index: obj[item].index,
field: field,
colspan: 1,
rowspan: obj[item].row
});
}
}
function getObjFromTable($table, field) {
var obj = [];
var maxV = $table.find("th").length;
var columnIndex = 0;
var filedVar;
for (columnIndex = 0; columnIndex < maxV; columnIndex++) {
filedVar = $table.find("th").eq(columnIndex).attr("data-field");
if (filedVar == field) break;
}
var $trs = $table.find("tbody > tr");
var $tr;
var index = 0;
var content = "";
var row = 1;
for (var i = 0; i < $trs.length; i++) {
$tr = $trs.eq(i);
var contentItem = $tr.find("td").eq(columnIndex).html();
//exist
if (contentItem.length > 0 && content == contentItem) {
row++;
} else {
//save
if (row > 1) {
obj.push({ "index": index, "row": row });
}
index = i;
content = contentItem;
row = 1;
}
}
if (row > 1) obj.push({ "index": index, "row": row });
return obj;
}
</script>