Bootstraptable入门-合并存储格

@{
    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>

posted on 2020-05-08 15:56 青蛙學堂 阅读(26) 评论(0)  编辑 收藏 引用 所属分类: HTMLJavaScript

只有注册用户登录后才能发表评论。
<2020年5月>
262728293012
3456789
10111213141516
17181920212223
24252627282930
31123456

导航

统计

常用链接

留言簿(7)

随笔分类

随笔档案

收藏夹

青蛙学堂

最新评论

阅读排行榜

评论排行榜

60天内阅读排行