zoukankan      html  css  js  c++  java
  • bootstrap datatable

    <table id="screenTable" data-toggle="table">
    <thead>
    ...
    </thead>
    </table>
    $(function () {
    $('#screenTable').bootstrapTable({
    url: "/screen/list",
    dataField: "rows",
    cache: false, //是否使用缓存,默认为true
    striped: true, //是否显示行间隔色
    pagination: true, //是否显示分页
    pageSize: 10, //每页的记录行数
    pageNumber: 1, //初始化加载第一页,默认第一页
    pageList: [10, 20, 50], //可供选择的每页的行数
    search: true, //是否显示表格搜索
    showRefresh: true, //是否显示刷新按钮
    clickToSelect: true, //是否启用点击选中行
    toolbar: "#toolbar_screen", //工具按钮用哪个容器
    sidePagination: "server", //分页方式:client客户端分页,server服务端分页
    queryParamsType: "limit", //查询参数组织方式
    columns: [{
    field: "id",
    title: "ID",
    align: "center",
    valign: "middle"
    }, {
    field: "name",
    title: "定制名称",
    align: "center",
    valign: "middle",
    formatter: 'infoFormatter'
    }, {
    field: "time",
    title: "定制时间",
    align: "center",
    valign: "middle"
    },

    {
    title: '操作',
    field: 'operation',
    align: 'middle',
    formatter:function(value,row){
    alluserLisr.push(row);
    return '<div class="ui-pg-div">'+
    '<a href="javascript:void(0)" title="编辑" class="ui-icon icon-pencil grey" onclick="popedit('+row.id+');">编辑</a> '+
    '<a href="javascript:void(0)" title="删除" class="ui-icon icon-remove grey" onclick="popalert('+row.id+');">删除</a> '+
    '</div>';
    }
    }

    ],
    formatNoMatches: function () {
    return '无符合条件的记录';
    }
    });
    $(window).resize(function () {
    $('#screenTable').bootstrapTable('resetView');//当页面缩放时 将表格缩放  响应式
    });
    });
    function infoFormatter(value, row, index) {
    return '<a href=/screen/' + row.id + ' target="_blank">' + row.name + '</a>';
    }
    

      2.事件

    $(function(){
                /*初始化表格*/
                $("#screenTable").bootstrapTable({
                    data: data
                });
                /*加载事件*/
                $("#screenTable")
                .on('click-row.bs.table', function (e, row, ele,field) {
                    $("#eventInfo").text('点击行事件 当前商品名:'+ row.goodsName 
                                        + ',价格:' + row.price 
                                        + ',效期:' + row.date
                                        + '当前点击单元格field值为:' + field);
                })
                .on('dbl-click-row.bs.table', function (e, row, ele,field) {
                    $("#eventInfo").text('双击行事件');
                })
                .on('check.bs.table', function (e, row,ele) {
                    $("#eventInfo").text('checkbox选中事件');
                })
                .on('uncheck.bs.table', function (e, row,ele) {
                    $("#eventInfo").text('checkbox取消选中事件');
                })
                .on('sort.bs.table', function (e, field, order) {
                    var o;
                    switch(order){
                        case "desc":
                        o = "降序";
                        break;
                        case "asc":
                        o = "升序";
                        break;
                    }
                    $("#eventInfo").text('排序事件 当前' + name + '列,以' + o + "排列");
                })
                .on('check-all.bs.table', function (e,dataArr) {
                    $("#eventInfo").text('全选事件');
                })
                .on('uncheck-all.bs.table', function (e,dataArr) {
                    $("#eventInfo").text('取消全选事件');
                })
                .on('load-success.bs.table', function (e, data) {
                    $("#eventInfo").text('加载成功事件');
                })
                .on('load-error.bs.table', function (e, status) {
                    $("#eventInfo").text('加载错误事件');
                })
                .on('column-switch.bs.table', function (e, field, checked) {
                    var colName;
                    switch(field){
                        case "goodsName":
                        colName = "商品名称";
                        break;
                        case "price":
                        colName = "价格";
                        break;
                        case "date":
                        colName = "日期";
                        break;
                    }
                    if(checked){
                        $("#eventInfo").text('筛选列事件 ' + colName + '列显示');
                    }else{
                        $("#eventInfo").text('筛选列事件 ' + colName + '列隐藏');
                    }
                })
                .on('page-change.bs.table', function (e, number, size) {
                    $("#eventInfo").text('切换页事件 当前页数:第' + number + "页,每页显示数量" + size + "条");
                })
                .on('search.bs.table', function (e, text) {
                    $("#eventInfo").text('搜索事件');
                });
            });

    、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
    复选框事件

    $('#').bootstrapTable('destroy').bootstrapTable({
    method: 'get',

    url:',
    cache: false,
    dataType: "json",
    pagination: true,
    "queryParamsType": "limit",
    //singleSelect: true,
    singleSelect: false,
    contentType: "application/x-www-form-urlencoded",
    pageSize: current_page_checkline,
    pageNumber:1,
    pageList: [10,20,50,100,1000],
    sidePagination: "server",
    height: 280,
    formatLoadingMessage: function () {
    return "请稍等,正在加载中...";
    },
    queryParams: function (params) {
    return {
    rows: params.limit, //页大小
    page: params.offset==0 ? 1 : params.offset/params.limit+1,
    barTypes:'guanxian,taoguan',
    namelike:encodeURI(  )
    }
    },

    columns: [

    {checkbox : true,align: 'center',valign: 'middle',formatter:function(value,row) {}
    },
    { title: '管点类型', field: 'barType',align: 'center',valign: 'middle',formatter:function(value,row){
    if(value=="guanxian")
    {
    return "管线";
    }
    else if(value=="otherguanxian")
    {
    return "其他管线";
    }
    else if(value=="taoguan")
    {
    return "套管";
    }
    }},
    { title: '名称',field: 'name',align: 'center',valign: 'middle'},

    ],
    onCheck:function (row, elm, field) { //选中某一个

    },

    onCheckAll:function (row, elm, field) { //全部选中


    }/*,
    onUncheck:function (row, elm, field) {


    },
    onUncheckAll:function (row, elm, field) {


    }*/
    });

      3.复选框默认选中

    if (row.isSelect == 1){
    return {

    checked : true//设置选中
    };
    }else{
    return {

    checked : false//设置不选中
    };
    }

    4. 获取数据  

    var selectObjs=$('#deviceManageTable').bootstrapTable('getData');

  • 相关阅读:
    STP RSTP
    数组与文字处理
    3 算法、控制结构
    2 变量、运算符、位运算
    1
    小程序点击变换,
    小程序授权demo
    小程序获取参数
    小程序是否转发群还是个人(转发功能)
    小程序分享转发功能实现demo
  • 原文地址:https://www.cnblogs.com/lgjc/p/6402353.html
Copyright © 2011-2022 走看看