fastadmin使用手記

10727 ワード

目次

一般的なcssクラス:
コンポーネントの使用
Bootstrap-datetimepickerコンポーネント
Tableの使用
汎用検索
汎用検索のカスタマイズ
nice validatorフォーム検証コンポーネント
単一選択
一般的なcssクラス:
システムのデフォルトでは、イベントのclassが登録されています.
btn-add:ボタンシステムを追加すると、追加ウィンドウを開くイベントがバインドされます.
btn-edit:編集ボタンシステムは編集ウィンドウを開くイベントをバインドする
btn-del:削除ボタンシステムは削除ウィンドウを開くイベントをバインドする
btn-import:インポートボタンシステムがインポートウィンドウを開くイベントをバインド
btn-more:より多くのボタンは、システムを使用してインポートウィンドウを開くイベントをバインドします.
btn-multi:操作使用を指す
btn-disabled:このclassを追加すると、リストに選択したデータがある場合にのみボタンが使用可能になります.
btn-dialog hrefをダイアログボックスで開きます
btn-ajax
btn-addtabs接続が新しいシステムタブで開きます data-area='["100%","100%"]'は、フルスクリーンページをデフォルトで設定できます.
Fast.api.close("");//jsで現在のポップアップレイヤを閉じる
コンポーネントの使用
Bootstrap-datetimepickerコンポーネント
Bootstrap-datetimepickerコンポーネントイベントのリスニング:
まず、次のようなBootstrap-datetimepickerをリスニングページのjsファイルに導入します.

define(['jquery', 'bootstrap',"bootstrap-datetimepicker", 'backend', 'table', 'form'], function ($, undefined, undefined1,Backend, Table, Form) {

関連イベントのリスニング:

$("#start-date").datetimepicker().on("dp.hide",function () {

 });

Bootstrap-datetimepickerの詳細については、スタンプを押してください.http://www.bootcss.com/p/bootstrap-datetimepicker/
Tableの使用
JS構成オプション:

            url: '',
            undefinedText:'-', //           
            sidePagination: 'server',
            method: 'get', //    
            toolbar: ".toolbar", //   
            search: true, //        
            cache: false,
            commonSearch: true, //        
            searchFormVisible: false, //          
            titleForm: '', //        ，       ：    
            idTable: 'commonTable',
            showExport: true,
            exportDataType: "all",  //    all                   selected         basic         
            exportTypes: ['json', 'xml', 'csv', 'txt', 'doc', 'excel'],
            exportOptions:{  //      ;     ：https://www.npmjs.com/package/tableexport.jquery.plugin
                ignoreColumn:[0,9]
            },
            pageSize: 10,
            pageList: [10, 25, 50, 'All'],
            pagination: true,
            clickToSelect: true, //        
            dblClickToEdit: true, //        
            singleSelect: false, //      
            showRefresh: false,  //        
            locale: 'zh-CN',
            showToggle: true,
            showColumns: true,
            pk: 'id',
            sortName: 'id',
            sortOrder: 'desc',
            paginationFirstText: __("First"),
            paginationPreText: __("Previous"),
            paginationNextText: __("Next"),
            paginationLastText: __("Last"),
            cardView: false, //    
            checkOnInit: true, //         
            escape: true, //         
            extend: {
                index_url: '',
                add_url: '',
                edit_url: '',
                del_url: '',
                import_url: '',
                multi_url: '',
                dragsort_url: 'ajax/weigh',
            },

汎用検索
fastadminはbootstraptabe-commonsearchプラグイン、以下(bt-cs)と略称し、汎用検索を実現し、データベース内のフィールドを容易にjsでbootstrapTableの列属性を設定することで検索項目とすることができる.次に、auth/adminコントローラのindexメソッドに対応するjsコードを管理します.

//      
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                columns: [
                    [
                        {field: 'state', checkbox: true, },
                        {field: 'id', title: 'ID'},
                        {field: 'username', title: __('Username')},
                        {field: 'nickname', title: __('Nickname')},
                        {field: 'area_info', title:'    '},
                        {field: 'groups_text', title: __('Group'), operate:false, formatter: Table.api.formatter.label},
                        {field: 'email', title: __('Email')},
                        {field: 'status', title: __("Status"), formatter: Table.api.formatter.status},
                        {field: 'logintime', title: __('Login time'), formatter: Table.api.formatter.datetime},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: function (value, row, index) {
                                if(row.id == Config.admin.id){
                                    return '';
                                }
                                return Table.api.formatter.operate.call(this, value, row, index);
                            }}
                    ]
                ],
            });
operate:false, formatter: Table.api.formatter.label},
                        {field: 'email', title: __('Email')},
                        {field: 'status', title: __("Status"), formatter: Table.api.formatter.status},
                        {field: 'logintime', title: __('Login time'), formatter: Table.api.formatter.datetime},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: function (value, row, index) {
                                if(row.id == Config.admin.id){
                                    return '';
                                }
                                return Table.api.formatter.operate.call(this, value, row, index);
                            }}
                    ]
                ],
            });

bt-sc 会为除特殊列之外的其他列，创建一个input元素，放置在新建的用与搜索的form中。我们可以通过$(".from-commonsearch")来选择该from。如果不想把某一列作为搜索项，可以将列的operate属性设置为false; 可已通过为类设置 type,addclass,data属性，来设置其相应input元素的type,class值和自定义属性。如:

  {field: 'area_info', title:'    ',type:'input',addclass:'text areainfo' ,data:'data-id=1 data-other=test'},

日付検索を行う場合はtypeを:datatimeに設定し、自動的に値をタイムスタンプに変換して検索できます.
特殊列:field属性がoperateの列とsearchList属性が指定されている通.
searchListと時間によるフィルタの内容については、以下を参照してください.https://forum.fastadmin.net/thread/323
汎用検索のカスタマイズ
```
#tableのoptionsパラメータ設定:

searchFormVisible: true,
searchFormTemplate: 'customformtpl',

#viewファイルで検索テンプレートを定義するには:


    <!--form      form-commsearch   -->
    <form action="" class="form-commonsearch form-horizontal">
        <div style="border-radius:2px;margin-bottom:10px;background:#f5f5f5;padding:20px;">
            <div class="row">
                
              
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label col-xs-4">  </label>
                        <div class="col-xs-8">
                            <!--   operate   -->
                            <input type="hidden" class="operate" data-name="wangwang" value="="/>
                            <!--     -->
                            <input type="text" class="form-control" name="wangwang" value=""/>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label col-xs-4">  </label>
                        <div class="col-xs-8">
                            <input type="hidden" class="operate" data-name="status" value="="/>
                            {:build_select('status',$statusList,0)}
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <div class="col-xs-8 col-xs-offset-4">
                            <input type="submit" class="btn btn-success " value="  "/>
                            <input type="reset" class="btn btn-primary"  value="  "/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

```
nice validatorフォーム検証コンポーネント
公式住所:https://validator.niceue.com/docs/
***match**ルール2つ以上のパラメータを渡す場合は、パラメータを+スペースで区切る必要があります.カンマの後に必ずスペースを入れてください.そうしないと、検証ルールが無効になります.
***remote:**はサービス側の検証を要求し、公式のサービス側は結果フォーマットを返します.

は文字列結果

//       
""
//         
"      "

を直接返す.

はJSONフォーマット

//     
{"ok": "    "}
//      
{"error": "      "}

//        data
{"status": 200, "data": {"error": "      "}}

を返します.
fastadminは書き換えを行い、要求された戻りフォーマットは:
```
{「code」:0,「msg」:「検証に失敗」}
{「code」:1,「msg」:「検証成功」}
```
通常、コントローラではsuccessメソッドまたはerrorメソッドを使用して検証結果を返します.

単一選択

//  js  
columns: [
                    [
                        {checkbox:true,radio:true},
                       
                        {field: 'nickname', title: __('Nickname'), operate: 'LIKE'},
                       
                        {field: 'mobile', title: __('   '), operate: 'LIKE'},
                        {field: 'avatar', title: __('  '), formatter: Table.api.formatter.image, operate: false},
                        
                    ]
                ]




//           ID   
$("button[type='submit']").click(function(){
               var ids = Table.api.selectedids(table);
               var id = ids.pop();
                if(typeof id == "undefined"){
                    Toastr.error("       ");
                }
                console.log(id);
 });

pythonにおけるcontinue文とbreak文の違い

Android EditTextのsetOnEditorActionListenerメソッド