jquery datatable+backboneの再構築.

24581 ワード

今日のプロジェクトでは多くの場所で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;
        },

ここは循環してる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、Renfrence、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に渡してレンダリングを開始します.コードを参照してください.
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にはとがあります.前者は加算されますが表示されません.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をrenderする必要がある.

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                       ，                  。

jqueryは省市selectドロップダウンボックスの置換を実現する(サンプルコード)