//php文件 $table = [ "url" => "index&action=list", "cols" => [ ["checkbox" => "checkbox", "width" => 80], ["title" => "ID", "field" => "id", "width" => 80, "align" => "center"], ["title" => "名称", "field" => "title", "width" => 280], ["title" => "推送次数", "field" => "count", "width" => 100], ["title" => "同步删除", "field" => "isdel", "width" => 120, "align" => "center"], ["title" => "webhook链接", "field" => "link", "minWidth" => 100], ["title" => "操作", "field" => "do", "width" => 120, "align" => "center", "toolbar" => [ ["title" => "编辑", "event" => "iframe", "url" => "{$_L['url']['own_form']}index&action=edit", "color" => "default"], ["title" => "删除", "event" => "ajax", "url" => "{$_L['url']['own_form']}index&action=list-del", "color" => "danger", "tips" => "确认删除?"], ]], ], "toolbar" => [ ["title" => "添加内容", "event" => "iframe", "url" => "{$_L['url']['own_form']}index&action=edit", "color" => "default"], ["title" => "批量删除", "event" => "ajax", "url" => "{$_L['url']['own_form']}index&action=list-del", "color" => "danger", "tips" => "确认删除?"], ], "search" => [ ["title" => "输入名查找", "name" => "title"], ], "exports" => "方法名", //如果使用此参数,可自定义点击导出按钮时的js方法 "limit" => 20 //指定一页显示多少数据,不传默认20条,支持20、50、100、300、500、700、1000 ]; //html文件 <ui table($table)/>
cols支持什么参数可参考layui的数据表格组件的cols说明,这里仅展示field为do时的toolbar按钮参数。
["title" => "操作", "field" => "do", "width" => 120, "align" => "center", "toolbar" => [ [ "title" => "按钮标题", "icon" => "", //可选,按钮图标 "event" => "", //按钮点击操作类型,iframe:打开iframe窗,ajax:请求ajax, href:点击跳转链接,function:方法名可以直接执行页面里的js方法 "target" => "", //event为 href时,可设置跳转方式 "url" => "", //iframe的链接,ajax的链接 "color" => "", //按钮颜色,参考layui按钮 "tips" => "", //点击按钮后的提示 "if" => "d.status > 0", // d.参数名,可用来判断按钮是否显示。 ] ]]
[ "title" => "按钮标题", "icon" => "", //可选,按钮图标 "event" => "", //按钮点击操作类型,iframe:打开iframe窗,ajax:请求ajax, href:点击跳转链接,function:方法名可以直接执行页面里的js方法 "target" => "", //event为 href时,可设置跳转方式 "url" => "", //iframe的链接,ajax的链接 "color" => "", //按钮颜色,参考layui按钮 "tips" => "", //点击按钮后的提示 ]
后端可通过$_L['form']['LC']参数中获取到搜索值
//如果需要搜索项非常多,可在search第一行添加,即可将搜索框提升到表格最顶部。 ["type" => "fixed"] //输入框 ["title" => "输入名查找", "name" => "title"] //下拉 [ "title" => "状态", "type" => "select", "name" => "isshow", "value" => 1, //默认值,可为空 "option" => [ ["title" => "显示", "value" => 1], ["title" => "隐藏", "value" => 0] ] ] //日期选择 //type支持 year、month、date、time、datetime //range是否开启区间选择 //min、max最小最大可选择 [ "title" => "时间选择", "type" => "date", "name" => "date", "range" => false, "min" => "2021-01-01", "max" => "2028-12-31", ]
//从数据库获取数据,参数可参考sql_数据库操作方法的说明 $data = TABLE::set([ "table" => "", "where" => "", "order" => "", "bind" => [], "fields" => "" ]); //循环处理获取到的数据,如果有需要的话 foreach ($data as $index => $val) { $data[$index] = array_merge($val, [ "title" => "标题是:{$val['title']}", "status" => [ "type" => "switch", //输出一个switch切换按钮 "value" => "", //默认值 "text" => "启用|关闭", //状态文字 "url" => "", //点击后ajax请求地址 ], "cover" => [ "type" => "image", //输出一张图片 "src" => "", //图片链接 "width" => "", //图片宽度,默认auto "height" => "", //图片高度,默认100% "style" => "", //自定义图片css样式 ], "link" => [ "type" => "link", //输出一个链接 "title" => "", //链接文字 "url" => "", //链接地址,支持http://,也支持javascript:fname() "target" => "", //是否新窗口打开 "icon" => "", //链接前的图标,仅支持layui的图标,默认 edge "color" => "", //链接颜色 ] ]); } //输出数据 TABLE::out($data); //如有表格下拉选择、日期选择、颜色选择等更复杂的操作,可配合cols的templet参数实现,layui官网有完整示例。