前端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')) //監聽表單事件
~~~ 監聽表單事件,可以不用此公共函數,自己二次開發
- 介紹
- 系統架構
- 安裝
- 多語言
- 數據庫
- 控制器
- 開發示例
- 前端
- js 模板
- js cols字段解析
- 權限驗證
- table事件
- 常用組件
- input表單
- xmselect表單
- textarea表單
- upload表單
- editor表單
- select表單
- radio表單
- switch表單
- checkbox表單
- arrays表單
- icon表單
- date表單
- city表單
- region表單
- tags表單
- color表單
- submit按鈕
- close按鈕
- Api接口
- 插件基礎
- 目錄結構
- 插件市場
- 插件管理
- 插件開發
- 模塊
- 插件文件
- 插件配置
- 插件基礎信息
- 內置函數
- 插件數據庫
- 全局js 文件
- Curd命令行
- CURD命令
- Menu命令
- 表格規范
- CMS管理--待更新
- CMS目錄結構
- 內置標簽
- fun標簽
- 萬能標簽
- 分類標簽
- 導航標簽
- 廣告標簽
- tag標簽
- 友情鏈接
- 碎片標簽
- 常見問題