需求：表格中的checkbox有三种状态：隐藏、禁用、可选。



原本是希望AntDesign中存在相应的option来配置隐藏checkbox，但没找到。只有在rowSelection里通过设置getCheckboxProps的相关属性配置。

既然无法直接在渲染列表时就决定隐藏和显示，

那就换个思路：等列表渲染完成后，再去隐藏checkbox。

问题：如何找到列表中需要隐藏的checkbox呢？

我的思路就是：

通过getCheckboxProps给需要隐藏的checkbox加个隐藏标志，然后列表渲染完后，通过操作dom，给相应的元素加个样式隐藏掉。

相关实现：

1、给要隐藏的checkbox，设置它的name为‘disabled’

private getCheckboxProps(record: any) {
    return {
      props: {
        name: !record.isAuthority ? 'disabled' : '',
        disabled: record.isDisabled || !record.isAuthority
      }
    }
  }

2、然后再操作dom，给它个隐藏样式

private hiddenCheckbox() {
    const displayCheckboxList = document.getElementsByName('disabled')
    displayCheckboxList.forEach((item: any) => {
      item.parentNode.parentNode.parentNode.className = item.className + ' hidden'
    })
  }

你会发现，怎么这么搞笑，要去往上找3层父级呢。

是因为，如果只是隐藏了这个初始状态的checkbox，当你点击全选的时候，这个checkbox是会再次出现的，并且是勾选状态的。

（因为点击全选，antDesign会重新赋值类名，如果hidden加在这层就会被覆盖掉了）

所以我就直接往上，把父级给隐藏掉。

但其实这个都是蠢办法，讲道理可以更快捷的，就是：

     在getCheckboxProps里把它给禁用掉再隐藏，那你页面中的任何操作都不会算进这个checkbox了。

这个实现也还挺简单的。

iview可编辑表格  表格行添加输入框、选择器
表格的列定义中，在需要编辑的字段下使用render函数


Input输入框

{
	 title: '控制器名称',
	 key: 'conName',
	 align: 'center',
	 render: (h, params) => {
	     return h('Input', {
	         props: {
	             value:params.row.conName
	         },
	         on:{
	             'on-change':(event) => {
	                 this.addPoint.tableData[params.index][params.column.key] = event.currentTarget.value; //获取编辑行的inde和编辑字段名，对表格数据进行重新赋值
	             }
	         }
	     });
	 }
}


Selete选择器

{
    title: '点位',
    key: 'pointId',
    align: 'center',
    render: (h, params) => {
        return h('Select', {
            props: {
                value:params.row.pointId
            },
            on:{
                'on-change':(event) => {
                    this.addPoint.tableData[params.index][params.column.key] = event; //获取编辑行的inde和编辑字段名，对表格数据进行重新赋值
                }
            }
        },
        this.addPoint.pointList.map(function (type){
           return h('Option',{
               props:{
                   value: type.value,
                   key: type.label,
               }
           },type.label);
        })
        );
    }
}

特别注意：selete的on-change事件中的参数即为改变的值，与input的event.data(最后操作的字符)区别！！！
选择器option

addPoint:{
   pointList:[
        {
            value: '1',
            label:'点位1',
        },{
            value: '2',
            label:'点位2',
        },{
            value: '3',
            label:'点位3',
        }
    ],
}

效果图

说明：表格是很常用的控件，Android本身提供了TableLayout供布局实现，但本文介绍另外一种思路，用动态布局的方式实现，这种方式更灵活，内容、样式能高度扩展，熟练的人可随意运用到任何视图复用的场景。所以笔者需要声明的是，本文介绍的不是一个可直接使用的表格控件，而是一种终极解决方案。至于标题这么写，主要是为了便于资源检索。
废话少说，且看表格效果图：


附，页面完整效果图：

因为是在项目中抽取的，这个页面主要的技术点有：

1.使用PopupWindow弹出可选菜单。

2.动态生成自定义样式的单选按钮。

3.在TextView中设置部分文字大小不同，如图中XX（XX）。

4.动态生成表格。

我们重点关注最后一个，其余的读者感兴趣可自行下载源码学习。
实现思路:

1.定义表格的title部分，这部分在xml文档里静态描述，如下图：


红色框是三个Textview，因为每个Textview里面的文字有大有小，这个要在Java代码里利用SpannableString设定。（根据项目实际需求可选择使用），这里不是重点。

2.定义可重用的视图部分，在xml文件里描述，这部分作为表格的子元素，是重点。如下：


这里的表格线条是笔者用Textview描绘的，没有用图片。

3.在Java代码里，利用LayoutInflater().inflate()填充视图，添加模拟数据，然后将每个子视图添加到父容器中，完成视图重用。（每条数据实例化一次视图）

核心代码段：
for (int i = 0; i < washingroomAreas.size(); i++) {// 动态添加状态
			final WashingRoomPojo pojo = washingroomAreas.get(i);

			LinearLayout llWashingRoomItem = new LinearLayout(this);
			llWashingRoomItem.setLayoutParams(new RelativeLayout.LayoutParams(
					LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
			llWashingRoomItem = (LinearLayout) getLayoutInflater().inflate(
					R.layout.wr_area_item, null);
			TextView tvAreaName = (TextView) llWashingRoomItem
					.findViewById(R.id.tv_wr_areaname);
			TextView tvManMt = (TextView) llWashingRoomItem
					.findViewById(R.id.tv_wr_mt_man);
			TextView tvManDc = (TextView) llWashingRoomItem
					.findViewById(R.id.tv_wr_dc_man);
			TextView tvManXBC = (TextView) llWashingRoomItem
					.findViewById(R.id.tv_wr_xbc_man);
			TextView tvWomanMt = (TextView) llWashingRoomItem
					.findViewById(R.id.tv_wr_mt_woman);
			TextView tvWomanDc = (TextView) llWashingRoomItem
					.findViewById(R.id.tv_wr_dc_woman);
			TextView tvWomanXBC = (TextView) llWashingRoomItem
					.findViewById(R.id.tv_wr_xbc_woman);

			tvAreaName.setText(pojo.wrAreaName);
			tvManMt.setText("" + pojo.wrManMTNum);
			tvManDc.setText("" + pojo.wrManDCNum);
			tvManXBC.setText("" + pojo.wrManXBCNum);
			tvWomanMt.setText("" + pojo.wrWomanMTNum);
			tvWomanDc.setText("" + pojo.wrWomanDCNum);
			tvWomanXBC.setText("" + pojo.wrWomanXBCNum);
			llAreas.addView(llWashingRoomItem);

当然，笔者只重用了这一个视图，如果需要定义更加复杂的具有多个不同子元素的表格，可灵活变形，万变不离其宗！
最后附上源码：
http://download.csdn.net/detail/daijin888888/9322901

GitHub（给个星杯~）：
https://github.com/VingeDai/VariousTable

转载请注明出处：
http://blog.csdn.net/daijin888888/article/details/50159579

除了 .table 类之外，Bootstrap还为表格提供了4个辅助类 .table-striped、.table-bordered、.table-hover 和 .table-condensed，分别用来实现带条纹背景的表格、带边框的表格、带悬停效果的表格、紧凑的表格。这 4个类之间互不排斥，可以根据需要，为一个表格应用多个类。
1、带条纹背景的表格
为 <table> 添加 .table-striped 类，就可以为 <tbody> 中的表格行添加条纹背景，即实现表格数据行的隔行换色效果。如：
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
效果如图 3‑23所示：
图3-23  Bootstrap带条纹背景的表格
注意：这个效果是通过 :nth-child 选择器实现的，但 IE8 及以下的版本不支持这个选择器，需要考虑兼容性处理方案。
2、带边框的表格
为 <table> 添加 .table-bordered 类，就可以为所有单元格加上边框，也同时为整个表格添加圆角边框效果。如：
<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
效果如图 3‑24所示：
图3-24  Boostrap带边框的表格
3、带悬停效果的表格
为 <table> 添加 .table-hover 类，就可以为表格的数据行添加鼠标悬停效果。当鼠标经过数据行时，会为该行添加浅灰色背景。如：
<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
效果如图 3‑25所示：
图3-25  Boostrap带悬停修改的表格
4、紧凑的表格
为 <table> 添加 .table-condensed 类，所有单元格的 padding 都会减半（从8px减到4px），让表格更加紧凑。这种样式适合信息密集的情况。如：
<table class="table table-condensed">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
效果如图 3‑26所示：
图3-26  Boostrap紧凑的表格
关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。