使用方式

<link rel="stylesheet" href="/components/style/table.css" type="text/css" />
<script defer src="/components/js/table.js" type="text/javascript"></script>

基本用法

<div
  class="st_table"
  id="normal_table"
  tableData="tableData"
  tableColumn="tableColumn"
></div>

可排序

<div
  class="st_table"
  id="sort_table"
  tableData="tableData"
  tableColumn="tableSortColumn"
  default-sort="defaultSort"
  sortChange="handelSortChange"
></div>

批量多选

<div
  class="st_table"
  type="selection"
  id="batch_table"
  tableData="tableData"
  tableColumn="tableColumn"
  select-able="selectAble"
>
  <div class="st_table_footer_wrapper">
    <div class="batch_action_wrapper">
      <button class="st_button" size="mini" onclick="batchSubmit()">
        批量提交
      </button>
    </div>
  </div>
</div>

表格内容自定义

<div
  class="st_table"
  type="selection"
  id="custom_table"
  tableData="tableData"
  tableColumn="tableCustomColumn"
  select-able="selectAble"
>
  <table>
    <tbody>
      <tr id="1">
        <td colspan="1" rowspan="1" class="st_table_cell is_center">
          <div class="cell">2016-05-03</div>
        </td>
        <td colspan="1" rowspan="1" class="st_table_cell">
          <div class="cell">测试</div>
        </td>
        <td colspan="1" rowspan="1" class="st_table_cell">
          <div class="cell">
            <div class="st_input">
              <input
                type="text"
                autocomplete="off"
                placeholder="请输入内容"
                size="small"
                class="st_input_inner"
                onblur="getSortValue(this)"
              />
            </div>
          </div>
        </td>
        <td colspan="1" rowspan="1" class="st_table_cell">
          <div class="cell">
            <button
              class="st_button st_button_success is_plain"
              st-show="false"
              size="mini"
              onclick="assignment()"
            >
              分配
            </button>
            <button
              class="st_button is_plain"
              st-show="true"
              size="mini"
              onclick="edit()"
            >
              编辑
            </button>
            <button
              class="st_button st_button_danger is_plain"
              st-show="true"
              size="mini"
              onclick="enable(true)"
            >
              启用
            </button>
            <button
              class="st_button st_button_info is_plain"
              size="mini"
              onclick="enable(false)"
            >
              禁用
            </button>
          </div>
        </td>
      </tr>
      <tr id="2">
        <td colspan="1" rowspan="1" class="st_table_cell is_center">
          <div class="cell">2016-05-03</div>
        </td>
        <td colspan="1" rowspan="1" class="st_table_cell">
          <div class="cell">测试</div>
        </td>
        <td colspan="1" rowspan="1" class="st_table_cell">
          <div class="cell">
            <div class="st_input">
              <input
                type="text"
                autocomplete="off"
                placeholder="请输入内容"
                size="small"
                class="st_input_inner"
                onblur="getSortValue(this)"
              />
            </div>
          </div>
        </td>
        <td colspan="1" rowspan="1" class="st_table_cell">
          <div class="cell">
            <button
              class="st_button st_button_success is_plain"
              st-show="true"
              size="mini"
              onclick="assignment()"
            >
              分配
            </button>
            <button
              class="st_button st_button_danger is_plain"
              st-show="true"
              size="mini"
              onclick="edit()"
            >
              编辑
            </button>
            <button
              class="st_button is_plain"
              st-show="true"
              size="mini"
              id="popperBtn1"
              onclick="popconfirm.open('popperBtn1','确认启用吗？','1','popperConfirm')"
            >
              启用
            </button>
            <button
              class="st_button st_button_info is_plain"
              st-show="false"
              size="mini"
              onclick="enable(false)"
            >
              禁用
            </button>
          </div>
        </td>
      </tr>
      <tr id="3">
        <td colspan="1" rowspan="1" class="st_table_cell is_center">
          <div class="cell">2016-05-03</div>
        </td>
        <td colspan="1" rowspan="1" class="st_table_cell">
          <div class="cell">测试</div>
        </td>
        <td colspan="1" rowspan="1" class="st_table_cell">
          <div class="cell">
            <div class="st_input">
              <input
                type="text"
                autocomplete="off"
                placeholder="请输入内容"
                size="small"
                class="st_input_inner"
                onblur="getSortValue(this)"
              />
            </div>
          </div>
        </td>
        <td colspan="1" rowspan="1" class="st_table_cell">
          <div class="cell">
            <button
              class="st_button st_button_success is_plain"
              st-show="true"
              size="mini"
              onclick="assignment()"
            >
              分配
            </button>
            <button
              class="st_button is_plain"
              st-show="true"
              size="mini"
              onclick="edit()"
            >
              编辑
            </button>
            <button
              class="st_button st_button_danger is_plain"
              st-show="true"
              size="mini"
              id="popperBtn"
              onclick="popconfirm.open('popperBtn','确认启用吗？','1','popperConfirm')"
            >
              启用
            </button>
            <button
              class="st_button st_button_info is_plain"
              st-show="false"
              size="mini"
              onclick="enable(false)"
            >
              禁用
            </button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="st_table_footer_wrapper">
    <div class="batch_action_wrapper">
      <button
        type="button"
        class="st_button"
        size="mini"
        onclick="batchSubmit('selectAble_table')"
      >
        批量提交
      </button>
    </div>
  </div>
</div>

var pageData = {
  defaultSort: { sortType: "date", sortBool: "desc" },
  tableColumn: [
    {
      label: "日期",
      key: "date", // 对应数据参数名
      width: "280",
      align: "center", // 对齐方式，不设置默认左对齐
    },
    {
      label: "姓名",
      key: "name",
      width: "300",
      align: "left",
    },
    {
      label: "地址",
      key: "adress",
      align: "left",
    },
  ],
  tableSortColumn: [
    {
      label: "日期",
      key: "date",
      width: "280",
      align: "center",
      sortType: "date",
    },
    {
      label: "姓名",
      key: "name",
      width: "380",
      align: "left",
      sortType: "name",
    },
    {
      label: "地址",
      key: "adress",
      width: "380",
      align: "left",
      sortType: "adress",
    },
  ],
  tableCustomColumn: [
    {
      label: "日期",
      width: "280",
      align: "center" // 自定义内容表格的对齐方式，需要配合html中自定义数据样式使用
    },
    {
      label: "姓名",
      width: "300"
    },
    {
      label: "地址"
    },
    {
      label: "操作",
      width: "300"
    },
  ],
  tableData: [
    {
      date: "2016-05-03",
      name: "测试",
      adress: "神兔科技",
      id: 1,
    },
    {
      date: "2016-05-04",
      name: "测试1",
      adress: "神兔科技",
      id: 2,
    },
    {
      date: "2016-05-05",
      name: "测试2",
      adress: "神兔科技",
      id: 3,
    },
    {
      date: "2016-05-05",
      name: "测试2",
      adress: "神兔科技",
      id: 4,
    },
    {
      date: "2016-05-05",
      name: "测试2",
      adress: "神兔科技",
      id: 5,
    },
    {
      date: "2016-05-05",
      name: "测试2",
      adress: "神兔科技",
      id: 16,
    },
  ],
};
function pageReady() {
  table.toggleRowSelection('selectAble_table',[1,2,3,4,5,16])
}
function batchSubmit(id) {
  console.log(table[id].rowSelection);
}
//多选表格是否可选控制方法
function selectAble(row) {
  if (row.id === 1) {
    return false;
  }
}

属性

属性	说明	类型	可选值	默认值
tableData	表格数据	array	-	-
tableColumn	表头列数据	array	-	-
default-sort	默认排序	object	{ sortType: 'date', sortBool: 'desc' }	-
sortChange	排序选项变化回调	function	-	-
select-able	多选控制函数	function	-	-

方法

方法	说明	参数
toggleRowSelection	设置行选中	(tableId,rowIdList)