数据表格

代码示例

//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

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.参数名,可用来判断按钮是否显示。
    ]
]]

toolbar

[
    "title" => "按钮标题",
    "icon" => "", //可选,按钮图标
    "event" => "", //按钮点击操作类型,iframe:打开iframe窗,ajax:请求ajax, href:点击跳转链接,function:方法名可以直接执行页面里的js方法
    "target" => "", //event为 href时,可设置跳转方式
    "url" => "", //iframe的链接,ajax的链接
    "color" => "", //按钮颜色,参考layui按钮
    "tips" => "", //点击按钮后的提示
]

search

后端可通过$_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",
]

PHP里的数据输出

//从数据库获取数据,参数可参考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官网有完整示例。
大纲