jquery datatable + backbone 的重构。

今天项目中大量的地方使用了datatable .各处使用大同小异。然后就像把data 使用上的一些关键地方全部抽离出来。让在我现在的使用中能更简单。

 

首先 datatable base view 中：

1. 定义默认的配置项：

defaultOptions: {
            autoWidth: false,//自动宽度
            destroy: true,//自动destory
            filter: false,//不使用自带的过滤
            info: true,//显示table 相关信息，页数等
            ordering: true,//启用排序
            lengthChange: false,//不允许修改每页的显示数
            paginate: true,//启用分页
            serverSide: true,//启用服务器数据
            ajax: null,//ajax 请求数据
            data: null,// 需要显示的数据，和ajax 必须有已给有数据
            displayLength: 10,//每页显示的数据条数
            columns: []//table 的列。
        },

2.这里默认的 配置项 在 view 的 initialize 的时候会和 用户自定义的属性进行合并。

initialize: function(options) {
            var view = this;
            view.defaultOptions = $.extend({}, view.defaultOptions, options);// 合并用户自定义的options

            if (view.defaultOptions.ajax == null && view.defaultOptions.data == null) {
                throw new Error('dataTable  dataSource is null !');
            }
            // if (view.defaultOptions.columns.length == 0) {
            //     throw new Error('dataTable settings columns is mull!');
            // }
            if (view.defaultOptions.ajax == null && view.defaultOptions.data != null) {
                view.defaultOptions.serverSide = false;
            }
        },

 

 3. 在view 的render 的时候 需要展示出来数据。

render: function(){
            var view = this;

            view.$el.html(view.template());
            
            view.defaultOptions.columns = $.map(view.columns, function (colData) {
                return {
                    name: colData.name,
                    title: colData.title,
                    orderable: colData.orderable,
                    className: colData.className,
                    visible: colData.visible,
                    width: colData.width,
                    field: colData.field,
                    sortField: colData.sortField,
                    data: colData.data,
                    render: function ( data, type, full, meta ) {
                        return view.getTableColumns(data,type,full,meta,colData);
                    }
                };
            });
            view.dataTable = view.$el.find('table.MnBaseDataTable').DataTable(view.defaultOptions);
            return this;
        },

 

这里循环了view.columns   这个变了赋值时在调用datatable render 的地方赋值进去的。  其中coldata  就是一个个的column 配置对象。如下：

var statusColumn = {
                                    title: 'STATUS',// table 列表头显示文字
                                    data: 'Status__c',//数据加载取ajax 回来数据的哪个值
                                    type: 'STRING',//数据渲染的方式，详见数据渲染
                                    columnName: 'status',//列名字
                                    sortField: 'Status__c',//拍序列
                                    visible: true,//是否显示
                                    orderable:false,//是否允许排序
                                    className:'',//样式名字。用于渲染的时候 加样式
                                    editable: false,//是否可编辑
                                    defaultContent: '',//默认显示，数据不存在的时候显示值
                                    actionOptions:[//这个是专门针对Action 这类的渲染必须的配置。
                                         {displayValue:'Delete',className:'delete'}
                                    ]

                                };                

 

上面的column 对象中必须要的几个： title, data,type,editable,  这几个是必须要的。

其中 type 有如下几种：Data、DataTime, Textarea, Currency,Percent,Boolean,Renfrencence,PickList,Action,其他类型，具体的区别见下面的数据渲染。

数据渲染：

根据传进来的 column 对象 type + editeable来确认该渲染成具体的页面上的样式。这里只是贴一段代码：

if (colData.type == 'DATE' || colData.type == 'DATETIME' ) {
                if (view.mode == 'edit' || editable) {
                    var formattedDate = (data) ? moment.utc(data).format(MnGPMDateFormat) : '';
                    result = '<div class="slds-input-has-icon editDataPicker slds-input-has-icon--right">'
                            +'  <svg aria-hidden="true" class="slds-input__icon pickerIcon" data-lang="'+meta.row+'" slds-icon-text-default ">'
                            +'    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="'+sldsUrl+'/assets/icons/utility-sprite/svg/symbols.svg#event"></use>'
                            +'  </svg>'
                            +'  <input  class="slds-input haspicker haspicker'+meta.row+' dateInput textBorder editText'+meta.row+'"  type="text"  value="'+formattedDate+'" readonly="" />';
                            +'</div>';
                } else {
                    result = (data) ? moment.utc(data).format(MnGPMDateFormat) : '';
                    result = '<div class="' + className + '">' + result + '</div>';
                }
            }

 

这里根据传进来的type 确定为渲染为时间样式。 先格式化时间 -- >  判断是否可编辑，如果可编辑那么，渲染出来的结果就是input + Icon 图标可以编辑的文本框中显示时间日期。否则以文本的方式显示时间。

同理其他的类型都是这样处理的。

 

到此我们的处理就完成，在最后交给了datatable columns 让datatable 来给我们处理。

 

简单说使用：

 

1.调用的view中： 

1.第一步初始化datatable 的参数以及basedatatable view. 见 下面代码的 initiallize.

2.view  render 的时候 初始化 BaseDataTable 的view 并将columns 传给BaseDataTable 开始渲染。见代码 render .

3.其他，getData  方法也是必须要的，是ajax 请求数据的必要方法，按照自己需要的逻辑来加载数据 最后调用callback 回掉交给datatable 来渲染。

initialize: function(options) {
    var view = this;
    //......其他业务  
    var settings = view.getDataTableSettings();
    view.tableView = new MnAdvDataTableBaseView(settings);
},
render: function() {
    var view = this;
    //......其他业务
         view.tableView.setElement(view.$el.find('.MnAdvDataTableContainar'));
            view.tableView.columns = view.columns;// 赋值给datatable 的columns
            view.tableView.render();
            return view;
},
getDataTableSettings: function(){
    var view = this;
    var checkboxColumn ={
                            width: '5%',
                            title: '<label class="slds-checkbox" for="select-all"><input name="checkbox" type="checkbox" id="select-all" class="check-all" /><span class="slds-checkbox--faux"></span><span class="slds-form-element__label slds-assistive-text">select all</span></label>',
                            data: null,
                            type: 'BOOLEAN',
                            columnName: 'checkbox',
                            sortField: '',
                            visible: true,
                            editable: true,
                            orderable: false
                        };
 //......定义其他colum 
view.columns =[checkboxColumn, ........]; 
    var settings = {
                ajax: function (data, callback, settings) {
                    view.getData(data, callback, settings);
                },
                displayLength: view.filter.pageSize,
                order:[]
            };
            return settings;
},

getData: function(data, callback, settings){
 var result =  //......请求后台数据的方法 返回json 。 
 callback(result) 
    
}

 

 

现在我们的 option cloumns 是从后台 表的 fieldset 中读取出来数据，然后照上面 column 对象配置 放到datatable的columns  中统一渲染：

1.配置filedset

在.object 中 的新增 fieldsets 节点：

<fieldSets>
        <fullName>AdvSimulationPriceChange</fullName>
        <description>Fields will be displayed in the AdvSimulation Price Changes  tab</description>
        <displayedFields>
            <field>MnCountryPriceType__r.PriceTypeName__c</field>
            <isFieldManaged>false</isFieldManaged>
            <isRequired>false</isRequired>
        </displayedFields>
        <displayedFields>
            <field>MnCountryProductSKU__r.CurrentStatus__c</field>
            <isFieldManaged>false</isFieldManaged>
            <isRequired>false</isRequired>
        </displayedFields>
        <displayedFields>
            <field>MnProductSKU__r.Strength__c</field>
            <isFieldManaged>false</isFieldManaged>
            <isRequired>false</isRequired>
        </displayedFields>
        <displayedFields>
            <field>MnProductSKU__r.Name</field>
            <isFieldManaged>false</isFieldManaged>
            <isRequired>false</isRequired>
        </displayedFields>
        <displayedFields>
            <field>MnProductSKU__r.PackSize__c</field>
            <isFieldManaged>false</isFieldManaged>
            <isRequired>false</isRequired>
        </displayedFields>
        <label>AdvSimulation Price Change Fields</label>
    </fieldSets>

 

 

其中label 以及 fullName description 是必须要的。salesforce 前台查询的时候就是根据fullName 来查询的。

在fieldSets 中可以有<availableFields> 和<displayedFields> 前者是加进去 但是不显示，salesforce页面中能在左边框中看到。 后者是显示在右边的。 前者前台是查询不出来的，只有displayedField才能查出来。可以在页面中两边的互相拖动来修改availableFields。

 

前台js 查询

需要用到的collection:MnFieldSetCollection  将这个collection require 进来。以下是查询方法：

loadFieldSet: function() {
            var view = this;
            var priceEventFieldSet = new MnFieldSetCollection({objectName: 'MnAdvSimulationPriceEvent__c',fieldSetName: 'AdvSimulationPriceChange'});
            priceEventFieldSet.fetch({
                success: function(collection, response, options) {
                    //console.log(JSON.stringify(response));

                },
                error: function(m, r, o) {
                    appRouter.showError('Failed to load MnAdvSimulationPriceEvent fiedSet.', error.message, error);
                }
            });
        },

 

objectName ： 查询的fiedset所在的object .

fieldSetName: 上面在object 中配置的fieldSets 中的fullName.

注意点： 如果是查询出来用做datatable 显示的话，那么的注意这个方法是需要执行时间的，在还没进sucess 之前datatable就已经render 完成了，这个需要按照自己的逻辑来render datatable 的view，或者render 当前的view.

 

fixed  columns

 

这个是属于datatable的插件一种，需要引入jquery.fixedColumns。

使用如下：

在datatable 的setting 中配置以下配置----必须都要

scrollX: true,
scrollCollapse: true,
fixedColumns : {leftColumns:0, rightColumns:6};

 

注意点：fixedColumns  对象中leftColumns 表示从左边开始起有几列是fixed 的，right 是右边。 在1.10 版本中设定右边的时候 leftColumns 必须设置为0  不然左边会有一列也是fixed 的。
fixedColumns 必须要设置好datatable的外部容器的宽度,不能是百分比,最好是根据js来动态设置。

fixedColumns  会产生三个table 用漂浮的形式来展示的，三个table 都是一样的，只不过显示的东西不一样，所以注意点就是在用js 给某个 文本框等设置值的时候 一定要全部设置，不然可能会导致设置了页面上看不到效果。