Js表格组件神器

        由于Bootstrap Table是 Bootstrap 的一个组件，所以它是依赖 Bootstrap 的，我们首先需要添加 Bootstrap 的引用。Bootstrap 的包直接在 Bootstrap v3 中文文档  里面可以找到。

废话不多说，下面我们来就看一看使用方法：

① 在cshtml页面引用相关组件，并定义好一个空的表格

@{
    Layout = null;
}



    
    
    @*1、Jquery组件引用*@
    

    @*2、bootstrap组件引用*@
    
    
    
    @*3、bootstrap table组件以及中文包的引用*@
    
    
    
    
    @*4、页面Js文件的引用*@
    


    
        
            查询条件
            
                
            
               

        
            
                新增
            
            
                修改
            
            
                删除
            
        
        
    

 ② Js初始化

$(function () {

    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();

    //2.初始化Button的点击事件
    var oButtonInit = new ButtonInit();
    oButtonInit.Init();

});


var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#tb_departments').bootstrapTable({
            url: '/Home/GetDepartment',         //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns: [{
                checkbox: true
            }, {
                field: 'Name',
                title: '部门名称'
            }, {
                field: 'ParentName',
                title: '上级部门'
            }, {
                field: 'Level',
                title: '部门级别'
            }, {
                field: 'Desc',
                title: '描述'
            },  {
				field: 'operate',
				title: ' *** 作',
				align: 'center',
				width: "290px",
				events: EvenInit,              // 触发事件
				formatter: operateFormatter    // 格式化 *** 作
			}],
            onLoadSuccess: function(row) { //加载成功时执行
				$("thead").css("background-color", "#33CABB");
				$("thead").css("color", "white");
			},
			onLoadError: function() { //加载失败时执行
				console.log("加载数据失败", {
					time: 1500,
					icon: 2
				});
			}
        });
    };

    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.pageSize,   //页面大小
            offset: params.pageNumber,  //页码
            departmentname: $("#txt_search_departmentname").val(),
            statu: $("#txt_search_statu").val()
        };
        return temp;
    };
    return oTableInit;
};


function operateFormatter(value, row, index) {
	return [
		'删除',
		'审批',
		'修改',
		'查看详情',
	].join('');
}

window.EvenInit = {
	'click .RoleOfA': function(e, value, row, index) {
		var _iframe = window.parent;
		_iframe.modalOut('../../html/modal/itemDelete.html', {
			id: row.id,
			url: '/user/unitDelect'
		}, function() {
			$('#table_list').bootstrapTable('refresh');
		});
	},
	'click .RoleOfB': function(e, value, row, index) {
		var _iframe = window.parent;
		_iframe.modalOut('../../html/modal/unitAdd.html', {
			id: row.id,
			myModalLabel: '修改',
			placeholder: '不填写则不修改密码',
		}, function() {
			$('#table_list').bootstrapTable('refresh');
		});
	},
	'click .RoleOfC': function(e, value, row, index) {
		var _iframe = window.parent;
		_iframe.modalOut('../../html/modal/unitSelect.html', {
			id: row.id
		}, function() {});
	},
	'click .RoleOfD': function(e, value, row, index) {
		var _iframe = window.parent;
		_iframe.modalOut('../../html/modal/particulars.html', {
			id: row.id,
			url:'/user/userParticulars',
		}, function() {
			$('#table_list').bootstrapTable('refresh');
		});
	},

};


var ButtonInit = function () {
    var oInit = new Object();
    var postdata = {};

    oInit.Init = function () {
        //初始化页面上面的按钮事件
    };

    return oInit;
};

③  在Controller里面对应的方法 

public JsonResult GetDepartment(int limit, int offset, string departmentname, string statu)
{
    var lstRes = new List();
    for (var i = 0; i < 50; i++)
    {
        var oModel = new Department();
        oModel.ID = Guid.NewGuid().ToString();
        oModel.Name = "销售部" + i ;
        oModel.Level = i.ToString();
        oModel.Desc = "暂无描述信息";
        lstRes.Add(oModel);
    }

    var total = lstRes.Count;
    var rows = lstRes.Skip(offset).Take(limit).ToList();
    return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);
}

这里有一点需要注意：如果是服务端分页，返回的结果必须包含total、rows两个参数。漏写或错写都会导致表格无法显示数据。相反，如果是客户端分页，这里要返回一个集合对象到前端。 

④ 效果及说明

二、父子表：

① 初始化表格，注册行展开事件

$("#tb_powerset").bootstrapTable({
                url: '/api/MenuApi/GetParentMenu',
                method: 'get',
                detailView: true,//父子表
                //sidePagination: "server",
                pageSize: 10,
                pageList: [10, 25],
                columns: [{
                    field: 'MENU_NAME',
                    title: '菜单名称'
                }, {
                    field: 'MENU_URL',
                    title: '菜单URL'
                }, {
                    field: 'PARENT_ID',
                    title: '父级菜单'
                }, {
                    field: 'MENU_LEVEL',
                    title: '菜单级别'
                }, ],
                //注册加载子表的事件。注意下这里的三个参数！
                onExpandRow: function (index, row, $detail) {
                    oInit.InitSubTable(index, row, $detail);
                }
            });

还是来看看子表加载事件onExpandRow对应方法function (index, row, $detail)的三个参数，

index：父表当前行的行索引。

row：父表当前行的Json数据对象。

$detail：当前行下面创建的新行里面的td对象。

第三个参数尤其重要，因为生成的子表的table在装载在$detail对象里面的。bootstrap table为我们生成了$detail这个对象，然后我们只需要往它里面填充我们想要的table即可。

② 我们来看oInit.InitSubTable()这个方法 

//初始化子表格(无线循环)
    oInit.InitSubTable = function (index, row, $detail) {
        var parentid = row.MENU_ID;
        var cur_table = $detail.html('').find('table');
        $(cur_table).bootstrapTable({
            url: '/api/MenuApi/GetChildrenMenu',
            method: 'get',
            queryParams: { strParentID: parentid },
            ajaxOptions: { strParentID: parentid },
            clickToSelect: true,
            detailView: true,//父子表
            uniqueId: "MENU_ID",
            pageSize: 10,
            pageList: [10, 25],
            columns: [{
                checkbox: true
            }, {
                field: 'MENU_NAME',
                title: '菜单名称'
            }, {
                field: 'MENU_URL',
                title: '菜单URL'
            }, {
                field: 'PARENT_ID',
                title: '父级菜单'
            }, {
                field: 'MENU_LEVEL',
                title: '菜单级别'
            }, ],
            //无线循环取子表，直到子表里面没有记录
            onExpandRow: function (index, row, $Subdetail) {
                oInit.InitSubTable(index, row, $Subdetail);
            }
        });
    };

本篇文章参考了JS组件系列——表格组件神器：bootstrap table