• bootstrap教程-表格(table) 样式设计
  • 瓦缸没米 发表于 2016/2/23 10:28:00 | 分类标签: bootstrap教程 table
  • 表格样式需求:比如我们有一个显示订单页面的需求,不同状态的订单显示不同的颜色,如图:
    关于表格行的样式设置,其他是它一个最基础的功能,当然,效果并不难,自己用jQuery设置tr的背景色也可以实现,但是博主觉得,既然bootstrap table提供了机制设置行的背景色,我们何不用它内置的api呢。我们看看如何实现。

    初始化表格的时候
     //初始化Table
    $('#tb_order').bootstrapTable({
    url: '/TableStyle/GetOrder', //请求后台的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, //是否显示父子表
    rowStyle: function (row, index) {
    //这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
    var strclass = "";
    if (row.ORDER_STATUS == "待排产") {
    strclass = 'success';//还有一个active
    }
    else if (row.ORDER_STATUS == "已删除") {
    strclass = 'danger';
    }
    else {
    return {};
    }
    return { classes: strclass }
    },
    columns: [{
    checkbox: true
    }, {
    field: 'ORDER_NO',
    title: '订单编号'
    }, {
    field: 'ORDER_TYPE',
    title: '订单类型'
    }, {
    field: 'ORDER_STATUS',
    title: '订单状态'
    }, {
    field: 'REMARK',
    title: '备注'
    }, ]
    });
    其实重点就在这个参数里面:
    rowStyle: function (row, index) {
    //这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
    var strclass = "";
    if (row.ORDER_STATUS == "待排产") {
    strclass = 'success';//还有一个active
    }
    else if (row.ORDER_STATUS == "已删除") {
    strclass = 'danger';
    }
    else {
    return {};
    }
    return { classes: strclass }
    },
    bootstrap table支持5中表格的行背景色,分别是'active', 'success', 'info', 'warning', 'danger'这五种,至于每种对应的背景颜色,将代码运行起来就可看到。关于这个方法的返回值,博主第一次用的时候也研究了好久,按照bootstrap table的规则,必须返回一个json格式的对象型如: { classes: strclass } 。
  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:瓦缸没米
  • 加入时间:2013/6/13 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮