js 模板 · FunAdmin開發文檔最新版

前端js ~~~ define(['jquery','table','form'], function ($,Table,Form) { let Controller = { index: function () { Table.init = { table_elem: 'list', tableId: 'list', searchName :'id' ,//搜索的名字默認不寫是ID requests: { modify_url: 'member/modify', // 請求地址 index_url: 'member/index', delete_url: 'member/delete', // add_url: 'member/add', // edit_url: 'member/edit', //下面兩個為自定義按鈕樣式 add_full:{ type: 'open',//打開彈窗 class: 'layui-btn-sm layui-btn-green',//樣式，見layui url: 'member.member/add', icon: 'layui-icon layui-icon-add',//圖標，見layuiicon text: __('Add'), title: __('Add'),//標題及按鈕文字 // full: 1, width:800,//窗口的大小 height:800 }, edit_full:{ type: 'open', class: 'layui-btn-xs layui-btn-green', url: 'member.member/edit', icon: 'layui-icon layui-icon-edit', text: __('Edit'), title: __('Edit'), // full: 1, width:'1200', height:'800', }, }, }; Table.render({ elem: '#' + Table.init.table_elem, id: Table.init.tableId, url: Fun.url(Table.init.requests.index_url), init: Table.init, search:true,//是否開啟搜索 //默認true searchFormTpl:'模板id',//是否開啟模板表單搜索，默認false, 1.5.0新增 searchShow:false,//默認不顯示搜索表單,true searchInput:true,//默認顯示搜索框 rowDouble:true,//雙擊事件 totalRow: false,//匯總行,默認關閉，匯總字段加totalRow:true屬性 toolbar: ['refresh','add_full','delete'], //toolbar 欄 cols: [[ {checkbox: true,}, {field: 'id', title: 'ID', width: 80, sort: true},//field：字段，title：列表標題，sort：排序 {field: 'username', title: __('membername'), width: 120,}, {field: 'email', title: __('Email'), width: 120,}, {field: 'mobile', title: __('mobile'), width: 120,edit: 'text'}, { field: 'sex', title: __('Sex'), filter: 'sex', width: 120, search: 'select', //搜索欄里面為：下拉框組件，區間為：between selectList: {0: __('Secret'), 1: __('Male'), 2: __('Female')}, //搜索欄下拉框里面的選項 templet: Table.templet.select, //下拉框模板解析 tips: __('Female')+'|'+ __('Male'), //表格的內容轉換 }, { field: 'memberLevel.name', title: __('MemberLevel'), width: 120, templet: Table.templet.resolution, //解析關聯模型字段 }, {field: 'avatar', title: __('Avatar'), width: 120, templet: Table.templet.image}, { field: 'status', title: __('Status'), width: 120, search: 'select', selectList: {0: __('Disabled'), 1: __('Enabled')}, tips:__('Enabled')+'|'+__('Disabled'),//開關字段自定義顯示文字 filter: 'status', templet: Table.templet.switch }, {field: 'create_time', title: __('Registertime'), width: 180,search:'range'},//創建時間，時間范圍搜索框 {field: 'last_login', title: __('Lastlogintime'), width: 180,search:'timerange', templet: Table.templet.time}, { minwidth: 250, align: 'center', title: __('Operat'), init: Table.init, templet: Table.templet.operat, //操作方法模板解析 operat: ['edit_full', 'delete'], //操作按鈕 } ]], limits: [10, 15, 20, 25, 50, 100], limit: 15, //默認行數 page: true, //開啟多頁 }); let table = $('#'+Table.init.table_elem); Table.api.bindEvent(table); }, add:function () { Controller.api.bindevent() }, edit:function () { Controller.api.bindevent() }, api: { bindevent: function () { Form.api.bindEvent($('form')) //監聽表單事件 } } }; return Controller; }); ~~~ # index 方法 ### requests 參數為請求參數， `index_url add_url edit_url modiry_url，export_url ` 為默認參數只包含url地址其他url 為自定義自定義按鈕全部參數如下 ~~~ type: 'open', //事件 open request delete destroy 等 class: 'layui-btn-sm layui-btn-green', //layui類 url: 'member.member/add', //地址 icon: 'layui-icon layui-icon-add' , //圖標 text: __('Add'), // 文字信息 title: __('Add'), //標題 // full: 1, //是否全屏打開默認沒有 width:800,//寬 height:800// 高 extend: 擴展參數一般為字符串或者json ~~~ ### table cols 參數詳解 - 默認比如： ~~~ {field: 'username', title: __('membername'), width: 120,}, ~~~ - 開關 ~~~ { field: 'status', title: __('Status'), width: 120, search: 'select', //搜索類型 selectList: {0: __('Disabled'), 1: __('Enabled')}, //搜索表單下拉選項 tips:"是|否", //開關顯示文本，默認設為selectList filter: 'status', //fiter templet: Table.templet.switch //模板解析，其它解析見下方 }, ~~~ - 時間選擇 search 可選 `timerage` 時間范圍timepicker `range` 普通時間范圍 `time ` 日期時間 ~~~ { field: 'last_login', title: __('Lastlogintime'), width: 180, search:'timerange', templet: Table.templet.time}, ~~~ - 關聯查詢時用到字段解析字段直接寫關聯模型字段`memberLevel.name` 模板選擇 `Table.templet.resolution` ~~~ { field: 'memberLevel.name', title: __('MemberLevel'), width: 120, templet: Table.templet.resolution }, ~~~ ### 模板解析 `Table.templet.resolution` //解析關聯模型字段 `Table.templet.image` //單圖片 `Table.templet.images` //多圖片 `Table.templet.content` 內容 `Table.templet.icon` 圖標 `Table.templet.url` url地址 `Table.templet.switch` 開關 `Table.templet.operat` 操作方法 # 其他 ~~~ Form.api.bindEvent($('form')) //監聽表單事件 ~~~ 監聽表單事件，可以不用此公共函數,自己二次開發