Powered by GitBook

前端表格分页

前端表格分页组件 snippets: sword.frontTable

1.属性说明

1.1 td标签上的属性

属性名	属性值	说明
data-columns	任意字符串	对应后端的该列数据的key值
width	任意字符串	改列对应的宽度
visible	true/false	该列是否显示
data-columns-align	任意字符串	表格的对齐方式，可选left,right,center
filter	过滤器格式,过滤器函数│入参1,入参2，入参3	过滤器方法，通过调用过滤器函数将该参数处理成指定的格式。
filter-target	过滤器作用的列号	当有过滤器时，需要设置

1.2 前端分页调用函数$().FrontTable(option)

option参数

属性名	属性值	说明
columnDefs	对象类型	列回调参数
ajaxParam	对象类型	取后台数据的发起的ajax参数

ajaxParam内的参数

属性名	属性值	说明
url	任意地址	取数据的url地址
data	对象类型	上送后台的参数
returnCodeKey	后台返回参数的标志位key │ 'none' │ 默认'hostRspCode'	用于判断后台返回交易类型为成功还是失败
returnMsgKey	后台返回参数的日志key │ 默认'hostRspMsg'	用于提取后台返回交易日志
successCode	后台返回交易表示成功类型的状态码 │ 默认'00000'	配合上述字段，可以实现当后台返回交易为失败市，sowrdajax组件会自动调用lobibox控件显示错误类型和错误日志，当returnCodeKey送'none'时，则将后台返回的数据直接透传至success函数，不进行交易状态校验
success	function	ajax成功时调用的函数方法。当送returnCodeKey和successCode，只有成功交易才会调用此方法；如果returnCodeKey送'none'时，则无论交易成功还是失败，均调用此方法

表格展示问题因为datatable的表格渲染会默认将表格当前的宽度作为style样式添加到dom上。因此，如果表格是放置在模态框或者隐藏的tab中，需要将表格的初始化方法调用顺序调整到模态框显示/tab显示之后，不然可能会造成表格的宽度显示有误，同时增加一个setTimeout函数减少显示过渡造成的表格宽度不正确问题。

//例如，模态框里面展示的是一个表格，则
$("#modal").modal();
setTimeout(function(){
    $("#table").frontTable(option);
},200); //一般追加200毫秒即可

过滤器属性说明

过滤器属性的值必须为制定格式，说明如下调用必须形如filter="isBetween|Extn,'1000','5000'"这种形式，其中

isBetween表示过滤器函数，该函数可以试用sword常用方法内的函数方法，也可以自己定义，定义的方式为
```
sword.yourFuncName = function(arg1,arg2,...){
 //你的过滤器函数主体
}
```
过滤器后面必须跟上'|'作为分隔符。
'|'后为过滤器的入参，用','分割，变量形式则直接填写变量key即可(该变量必须为后台返回的数组中存在的key值。),比如Extn；如果需要送常量，则用''包裹在外，比如'1000','test'。

表格内部元素的方法封装

sword.table.trans2amodal(option)

//该方法可以在列内生成一个a标签元素，点击标签能打开对应的模态框，option参数说明如下
/** 
* @param target amodal的作用模态框id 
* @param clickFn 模态框显示时的触发函数 不需要可以送入false 
* @param tagName 标签内的名称 
* @param tagId 标签内的id 
* @param fnData 函数的调用数据 
*/

sword.table.trans2button(option)

//该方法可以在列内生成一个button标签元素，点击标签能打开对应的模态框，option参数说明如下
/** 
* @param target amodal的作用模态框id 
* @param clickFn 模态框显示时的触发函数 不需要可以送入false 
* @param tagName 标签内的名称 
* @param tagId 标签内的id 
* @param className 标签的class 
* @param fnData 函数的调用数据 
* @param icon icon的类名 
* @param type 按钮的类型,可以为button或者icon
*/

sword.table.trans2longtitle(option)

//该方法可以在列内将较长的文字进行美化显示，多余的字用...隐藏，当鼠标悬浮时再显示完整的字。
/** 
* @param maxlength 最大支持的长度 
* @param tagName 标签的名字 
*/

1.3 前端上送数据格式

通过ajaxParam向后台发起的取数据请求中，组件会自动附上一个method字段，用来表示是前端分页还是后端分页，分别为front和back。其余字段则同ajaxParam中的data字段。

1.4 后端返回数据格式

{
    response:{
        data: {} //返回的数据数组
    },
    hostRspCode:'00000' //状态码，key值可变
    hostRspMsg:'操作成功' //状态说明，key值可变
}

2.代码展示


<sword:listTable id="table_sword_info">
  <tr>
    <th data-columns="Name"  width="120px">Name</th>
    <th data-columns="Position" data-columns-align="left">Position</th>
    <th data-columns="Office" data-columns-align="left" width="80px">Office</th>
    <th data-columns="Start_date" width="60px">Start_date</th>
    <th data-columns="Extn"  width="60px" filter="isBetween|Extn,'1000','5000'">Extn</th>
    <th data-columns="Extn"  width="60px">Extn</th>
  </tr>
</sword:listTable>

var table_option = {
    columnDefs: [
        {
            "render": function (data, type, row) {
                return sword.table.trans2amodal({
                    target: 'jsptag_modal',
                    clickFn: 'alert',
                    fnData: data,
                    tagName: data
                });
            },
            "targets": 0
        }, {
            "render": function (data, type, full, meta) {
                return sword.table.trans2longtitle({
                    maxlength: 16,
                    tagName: data
                });
            },
            "targets": 1
        }, {

            "render": function (data, type, row) {
                return sword.table.trans2button(
                    {
                        clickFn: 'alert',
                        icon: 'fa-edit',
                        tagName: '编辑',
                        className: 'btn-primary-o',
                        fnData: data,
                        type: "button"
                    });
            },
            "targets": 5
        }
    ],
    ajaxParam: {
        //successCode:"00001",
        url: "<%=path%>/json/data.json",
        type: "GET",
        success: function (result) {
            return result.response.data;
        }
    }
};
window.buildTable = function () {
    // 该函数即可以刷新，也可以实现表格重建
    $("#table_sword_info").FrontTable(table_option);
    $("#table_sword_info_filter").append('<button class="btn btn-warning pull-left" style="margin-right:15px" onclick="buildTable()"><i class="fa fa-fw fa-refresh"></i>刷新表格</button>')
};
buildTable();

//后台取到前台上送的参数

{
    method:'front', //分页方式
}

//后台返回到前台的参数
{
    response:{
        data: {} //返回的数据数组
    },
    hostRspCode:'00000' //状态码，key值可变
    hostRspMsg:'操作成功' //状态说明，key值可变
}

results matching ""

No results matching ""