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')) //监听表单事件 ~~~ 监听表单事件，可以不用此公共函数,自己二次开发