5.4.表格控件v2

更新时间：2020-02-19 15:39:40 作者：米拓建站

##表格控件v2
表格控件通过特有的方式获取数据，获取的数据支持无刷新分页，可以对表格数据进行相应的筛选、搜索，甚至是动态编辑、增加表格内容。
###获取表格数据
说明：基本的表格数据展示功能，自动实现无刷新分页。
> **HTML代码结构**

`class类要一样，尤其是dataTable，是激活控件的class类`
```html
<table class="dataTable table table-bordered table-hover table-striped w-full" id='test-table' data-table-ajaxurl="{$_M['url']['own_form']}a=dotable_list_json" data-table-pagelength='20'>
	<thead>
		<tr>
			<th width="200" data-table-columnclass="text-xs-center">预览图</th>
			<th width="80" data-table-columnclass="text-xs-center">编号</th>
			<th>操作</th>
		</tr>
	</thead>
</table>
```
> **PHP代码实例**

```php
function dotable_list_json(){
    global $_M;
    $table = load::sys_class('tabledata', 'new'); //加载表格数据获取类
    $where = "lang='{$_M[form][lang]}'"; //查询条件
    $order = "no_order"; //排序方式
    $array = $table->getdata($_M[table][news], '*', $where, $order);//获取数据
    foreach($array as $key => $val){
        $list = array();
        $list[] = $val[no_order];//当前行的第一列
        $list[] = $val[title]; //当前行的第二列
        $list[] = $val[displaytype]?'显示':'不显示';
        $list[] = $val[com_ok]?'是':'否';
        $list[] = $val[top_ok]?'是':'否';
        $list[] = date('Y-m-d',strtotime($val[updatetime]));
        $rarray[] = $list;
    }
    $table->rdata($rarray);//返回数据
}
```
[查看表格数据类的使用方法](http://doc.metinfo.cn/dev/basics/basics81.html "查看表格数据类的使用方法")
###控件参数
参数请写在table标签上。
####data-table-ajaxurl
表格数据来源，URL。
####data-table-pagelength
表格每页显示条数，默认30。
####data-table-type
表格请求地址请求方式，可选值get、post，默认值post。
####toclass
能够自定义表格每行class类，需要在表格数据来源中JSON的回传数据处理中增加，请求到的表格数据的单元行若`toclass`字段有值，则该行对应的`tbody>tr`的会加上class为`toclass`的值。
> **PHP示例代码**

```php
...
$list[]=1;
$list['toclass']='class-test';
...
```
表格会自动加上class，效果如下：
> **HTML示例代码**

```html
<tbody>
	...
	<tr class='class-test'>
		<td>1</td>
	</tr>
	...
</tbody>
```
####data-table-columnclass
能够给指定一列设置class类，在`table > thead > th`标签上定义。
> **HTML示例代码**

```html
<tbody>
	...
	<tr>
		<td class='class1'>1</td>
	</tr>
	...
</tbody>
```
添加了此参数后会给tfoot对应列的class也会加上`data-table-columnclass`的值，如果不想tfoot的列加上class，则在tfoot对应列加上参数`data-no_column_defs`。
例如：
```html
<tfoot>
	<tr>
		<th colspan="3" data-no_column_defs>
			<button type="submit" class='btn btn-primary'>保存</button>
		</th>
	</tr>
</tfoot>
```
> **带效果的class类**

```html
text-xs-left：内容左浮动
text-xs-right：内容右浮动
text-xs-center：内容居中
hide：隐藏
```
####selectable
全选、全不选功能
> **HTML示例代码**

```html
<table class="dataTable table table-bordered table-hover table-striped w-full" id='test-table' data-table-ajaxurl="{$_M['url']['own_form']}a=dotable_list_json" data-table-pagelength='20' data-plugin="selectable">
	<thead>
		<tr>
			<th class="w-50">
				<span class="checkbox-custom checkbox-primary">
					<input class="selectable-all" type="checkbox">
					<label></label>
				</span>
			</th>
			<th width="200" data-table-columnclass="text-xs-center">预览图</th>
			<th width="80" data-table-columnclass="text-xs-center">编号</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				<span class="checkbox-custom checkbox-primary">
					<input class="selectable-item" type="checkbox" value="1">
					<label></label>
				</span>
			</td>
			<td>619</td>
			<td>619</td>
			<td>619</td>
		</tr>
		<tr>
			<td>
				<span class="checkbox-custom checkbox-primary">
					<input class="selectable-item" type="checkbox" value="2">
					<label></label>
				</span>
			</td>
			<td>619</td>
			<td>619</td>
			<td>619</td>
		</tr>
	</tbody>
</table>
```
`data-plugin="selectable"`是启用全选功能的开关。
###表格方法
####表格数据筛选、搜索
能够实现让指定的`input、select`改变值后无刷新检索。
> **参数**

```
- data-table-search    // 有该参数即启用搜索
```
启用搜索后，该搜索框或下拉菜单的`name、value`会被传递到表格数据源`URL`，只需要在那里获取到值并进行数据库查询即可。
> **HTML示例代码**

```html
<div class="clearfix">
	
	<div class="input-search pull-xs-right">
		<button type="submit" class="input-search-btn"><i class="icon wb-search" aria-hidden="true"></i></button>
		<input type="text" class="form-control" name="keyword" data-table-search placeholder="请输入关键字">
	</div>
	
	<select name="search_fod" data-table-search class='pull-xs-right'>
	<option value="">导航栏显示</option>
	<option value="0">不显示</option>
	<option value="1">头部主导航条</option>
	<option value="2">尾部导航条</option>
	<option value="3">都显示</option>
	</select>
</div>
<table class="dataTable table table-bordered table-hover table-striped m-t-10" id='test-table' data-table-ajaxurl="{$_M['url']['own_form']}a=dotable_list_json" data-table-pagelength='20' data-plugin="selectable">
	<input type="hidden" name="test" class="form-control" data-table-search>// 表格请求时提交字段
	...
```
> **PHP示例代码**

```php
function table_edit_json(){ //表格数据获取
    global $_M;
    /*获取表格ajax传递的参数*/
    $term1   = $_M[form]['search_title'];   //获取搜索关键词 
    $term2  = $_M[form]['search_displaytype'];   //获取搜索关键词 
    $term3 = $_M[form]['search_com_ok'];   //获取搜索关键词 
    //在还可以获取多个搜索关键词
    /*查询表*/
    $search = $term1    ?"and title       like '%{$term1}%' ":'';                        //增加查询条件
    $search.= $term2!=''?"and displaytype =     '{$term2}'  ":'';                 //获取查询条件
    $search.= $term3!=''?"and com_ok      =     '{$term3}'  ":'';                    //获取查询条件
    //如果有更多查询条件，还可以继续增加
    $table = load::sys_class('tabledata', 'new');
    $where = "lang='{$_M[form][lang]}' {$search}"; //在条件语句中加入查询条件 $search
    $order = "no_order";
    $array = $table->getdata($_M[table][news], '*', $where, $order);
    foreach($array as $key => $val){
        $list = array();
        $list[] = "<div class=\"custom-control custom-checkbox\"><input class=\"checkall-item custom-control-input\" type=\"checkbox\" name=\"id\" value=\"{$val['id']}\"><label class=\"custom-control-label\"></label></div>";
        $list[] = "<input type=\"text\" name=\"no_order-{$val[id]}\" class=\"ui-input met-center\" style=\"width:20px;\" value=\"{$val[no_order]}\">";
        $list[] = "<a href="" title=\"链接关键词\">{$val[title]}</a>";
        $list[] = $val[displaytype]?'显示':'不显示';
        $list[] = $val[com_ok]?'是':'否';
        $list[] = $val[top_ok]?'是':'否';
        $list[] = date('Y-m-d',strtotime($val[updatetime]));
        $list[] = "<a href=\"\" class=\"edit\" title=\"链接关键词\">编辑</a><span class=\"line\">|</span><a href=\"\" class=\"delet\" data-confirm=\"{$_M[word][js7]}\" title="链接关键词">删除</a>";
        $rarray[] = $list;
    }
    $table->rdata($rarray);
}
```
####表格内容编辑、保存、删除
表格需要嵌套`form`表单并设置数据保存的`URL`：
```html
<form method="POST" action="数据提交处理的URL">
	....
	<table class="dataTable table table-bordered table-hover table-striped" id="test-table" data-table-ajaxurl="表格数据源URL">
		...
	</table>
</form>
```
#####表格内容编辑
表格数据支持返回html格式代码，部分代码示例：
```php
$list[]="<input type='text' name='no_order-{$val['id']}' value='{$val['no_order']}' class='form-control'>";
```
这样，就可以在显示的页面对输入框进行编辑。
**并不建议php直接返回html代码，规范写法需要将数据和样式分离，后台只传数据，前台js渲染样式，请参考下方的 "重新渲染单元格数据样式"。**
#####表格内容保存
表格每行内容需要一个`id`选择项来标记每行的内容。
> **选择项**

在表格中可以通过js给每行渲染一个选择项，建议放在第一列，`name`名称必须为`id`。
> **JS示例代码**

```js
if(typeof datatable_option =='undefined') datatable_option=[];
// datatable表格返回数据的处理
var datatable_index=$('#test-table').index('.dataTable');
datatable_option[datatable_index]=[];
datatable_option[datatable_index]['dataSrc']=function(result){
	var data=[];
	//重新处理result.data，result.data为表格数据
	$.each(result.data, function(i, val) {
		data[i]=[];
		data[i].push('<span class="checkbox-custom checkbox-primary">'
	                    +'<input type="checkbox" name="id" value="'+val.id+'" class="selectable-item">'
	                    +'<label></label>'
	                +'</span>');
		// ...
    });
    return data;
}
```
然后，我们需要有个全选的选择项，请放在`table > thead > th`里面。
```html
<span class="checkbox-custom checkbox-primary">
	<input class="selectable-all" type="checkbox">
	<label></label>
</span>
```
table标签上`data-plugin="selectable"`是启用全选功能的开关。
> **保存按钮**

`button[type="submit"]`的提交方式。
```html
<tfoot>
     <tr>
         <th>
		 	<span class="checkbox-custom checkbox-primary">
				<input class="selectable-all" type="checkbox">
				<label></label>
			</span>
		 </th>
		<th colspan="7" data-no_column_defs>
			<button type="submit" class='btn btn-primary'>保存</button>
		</th>
     </tr>
 </tfoot>
```
`保存的时候默认是提交全部的选项，不勾选也没问题。`
- **data-no_column_defs**：参见表格控件参数 data-table-columnclass。

#####表格内容删除
> **删除按钮**

```html
<tfoot>
     <tr>
         <th>
		 	<span class="checkbox-custom checkbox-primary">
				<input class="selectable-all" type="checkbox">
				<label></label>
			</span>
		 </th>
		<th colspan="7" data-no_column_defs>
			<button type="submit" class='btn btn-primary'>保存</button>
			<button type="button" class="btn btn-default" table-delet data-plugin="alertify" data-type='confirm' data-label-ok='确定' data-label-cancel='取消' data-confirm-title='是还是否？'>删除</button>
		</th>
     </tr>
 </tfoot>
```
`删除的时候是提交勾选的选项。`
> **参数**

- **table-delet**：删除按钮必须加的参数
- **data-plugin="alertify"**：点击删除按钮弹出按提示框，具体参考表单控件 [模态对话框](http://doc.metinfo.cn/yy/form/form60.html "模态对话框")。

> **如何获取提交的信息ID？**

保存或删除信息时提交的行的选择项`ID`会以逗号`,`隔开，储存在`name`名称为`all_id`的input中（该input隐藏不可见），因此可以在表单处理页面中通过`$_M['form']['all_id']`获取到选择项，拆分后就可以使用。
> **有多个提交按钮，比如一个保存一个删除，提交后如何区分？**

`button[type="submit"]`提交的时候，`input[submit_type]`的值为`save`；`button[table-delet]`提交的时候，`input[submit_type]`的为`delet`，因此可以在表单处理页面中通过 `$_M['form']['submit_type']` 来获取提交的类型。
> **PHP处理表格数据示例**

```php
function dosave(){
    global $_M;
    $list = explode(",",$_M['form']['all_id']) ;   //将选择项列表ID拆分为数组
    $type = $_M['form']['submit_type'];           //表格提交类型
    foreach($list as $id){
        if($id){//不能为空
            if($type=='save'){//用户点击了保存按钮
                $oldwords = $_M['form']['oldwords-'.$id];
                $newwords = $_M['form']['newwords-'.$id];
                $newtitle = $_M['form']['newtitle-'.$id];
                $url    = $_M['form']['url-'.$id];
                $num    = $_M['form']['num-'.$id];
                if(is_number($id)){//修改
                    $query = "UPDATE {$_M['table']['label']} SET 
                    oldwords = '{$oldwords}',
                    newwords = '{$newwords}',
                    newtitle = '{$newtitle}',
                    url      = '{$url}',
                    num      = '{$num}'
                    WHERE id = '{$id}' and lang = '{$_M[lang]}'
                    ";
                }else{//新增
                    $query = "INSERT INTO {$_M['table']['label']} SET 
                    oldwords = '{$oldwords}',
                    newwords = '{$newwords}',
                    newtitle = '{$newtitle}',
                    url      = '{$url}',
                    num      = '{$num}',
                    lang  = '{$_M[lang]}'
                    ";
                }
            }elseif($type=='delet'){//删除
                if(is_number($id)){
                    $query = "DELETE FROM {$_M['table']['label']} WHERE id='{$id}' and lang='{$_M[lang]}' ";
                }
            }
            DB::query($query);
        }
    }
    turnover("{$_M['url']['own_form']}a=doindex");
}
```
####动态新增行
设置一个链接或按钮，点击后可以动态增加一行，并且点击保存后可以将此行数据增加到数据库中。
首先，需要设置一个按钮，一般放在表格左上角，以及表格底部。
> **HTML示例代码**

```html
<tfoot>
	<tr>
		<th>
			<button type="button" class="btn btn-success" table-addlist data-url='{$url.own_form}a=do_table_add_list'>添加</button>
		</th>
	</tr>
</tfoot>
```
如果按钮放在表格外面，则需要在表格上添加参数`data-table-id`，参数值为表格table的id，例如：
> **HTML示例代码**

```html
<button type="button" class="btn btn-success btn-add-pdiscount" table-addlist data-table-id='#test-table' data-url='{$url.own_form}a=do_table_add_list'>添加</button>
<table class="dataTable table table-bordered table-hover table-striped m-t-10" id="test-table" data-table-ajaxurl="表格数据源URL">
...
```
> **数据源PHP代码示例**

```php
function do_table_add_list(){
    global $_M;
    $id = 'new-'.$_M['form']['new_id'];
    $metinfo ="<tr>
                    <td class='text-xs-center'>
                        <span class='checkbox-custom checkbox-primary'>
                            <input type='checkbox' name='id' value='{$id}' class='selectable-item'>
                            <label></label>
                        </span>
                    </td>
                    <td class='text-xs-center'>
                        <div class='form-group'>
                            <input type='text' name='name-{$id}' value='' required class='form-control'>
                        </div>
                    </td>
                    <td class='text-xs-center'>
                        <div class='form-group'>
                            <input type='text' name='num-{$id}' value='' required class='form-control'>
                        </div>
                    </td>
                    <td>
                        <div class='form-group'>
                            <input type='text' name='state-{$id}' value='' required class='form-control'>
                        </div>
                    </td>
                </tr>"; //HTML代码请看下面的示例
    echo $metinfo;
}
```
> **返回的HTML代码示例**

```html
<tr>
    <td class="text-xs-center">
        <span class="checkbox-custom checkbox-primary">
            <input type="checkbox" name="id" value="" class="selectable-item">
            <label></label>
        </span>
    </td>
    <td class="text-xs-center">
        <div class="form-group">
            <input type="text" name="name" value="" required class="form-control">
        </div>
    </td>
    <td class="text-xs-center">
        <div class="form-group">
            <input type="text" name="num" value="" required class="form-control">
        </div>
    </td>
    <td>
        <div class="form-group">
            <input type="text" name="state" value="" required class="form-control">
        </div>
    </td>
</tr>
```
这样点击按钮或链接，页面表格底部就能自动增加一行。
在执行保存的时候，为了区分每行的数据，可以设定新增行的选择项值为`new-$_M['form']['new_id']` ，这样在保存的时候可以用PHP分析带`new-`的就是要新增的数据，上面PHP代码示例就很好的利用了这个方法。
#####参数
- table-addlist
动态新增行开关。
- data-url
新增行的数据源URL，给链接或按钮设置此属性后，点击该按钮将会执行动态增加行，同时会给数据源传递一个不断增量的变量`$_M['form']['new_id']`，用于累计增加的数量和区分每个新增的行。
- data-nocancel
是否取消【撤销】按钮。如果没有该参数则会在新增行的后一个单元格末尾添加一个【撤销】按钮，点击【撤销】可以删除该新增行；

####删除新增行
说明：动态增加的行需要删除的时候可以采用这个方式。
用法：新增行的后一个单元格末尾会默认添加一个包含参数`table-cancel`的按钮，点击该按钮即可删除该行。
> **【撤销】按钮HTML代码示例**

```php
$list[]='name';
$list[]=1;
...
```
> **JS示例代码**

```php
$list['id']=0;
$list['name']='name';
...
```
> **JS示例代码**

```js
if(typeof datatable_option =='undefined') datatable_option=[];
// datatable表格返回数据的处理
var datatable_index=$('#test-table').index('.dataTable');
datatable_option[datatable_index]=[];
datatable_option[datatable_index]['dataSrc']=function(result){
	var data=[];
	//重新处理result.data，result.data为表格数据
	$.each(result.data, function(i, val) {
		data[i]=[];
		data[i].push('<span class="checkbox-custom checkbox-primary">'
	                    +'<input type="checkbox" name="id" value="'+val.id+'" class="selectable-item">'
	                    +'<label></label>'
	                +'</span>');
		data[i].push('<div class="form-group"><input type="text" name="name-'+val.id+'" value="'+val.name+'" required class="form-control" /></div>');
		// ...
    });
    return data;
}
```
####表格初始化后回调
> **JS示例代码**

```js
$('#test-table').on( 'init.dt', function ( e, settings,json) {
	...
})
```
> **参数**

**e：**当前表格对象
**settings：**表格设置的参数
**json：**表格请求到的数据
####表格重绘后回调
表格翻页或者筛选、搜索后的回调
> **JS示例代码**

```js
$('#test-table').on( 'draw.dt', function ( e,settings ) {
	...
})
```
> **参数**

**e：**当前表格对象
**settings：**表格设置的参数
####表格重绘前回调
表格刷新数据前的回调
> **JS示例代码**

```js
$('#test-table').on( 'preDraw.dt', function ( e,settings ) {
	...
})
```
> **参数**

**e：**当前表格对象
**settings：**表格设置的参数

---

文档中心

米拓学堂

帮助中心

在线交流