:-: **Table使用总览**
* * * * *
~~~
public function table(){
$table = new Table();
$form = new Form();
$form->addText("name", "名称");
return $table
//在table上方加入筛选条件
->setTableSearchForm($form)
//如果有自定义的tools事件,那么tablename的设置一定要在toolbar前面
->setTablename("mytest")
//开启checkbox
->addCheckbox()
//正常的列表
->addColumn("id", "ID")
->addColumn("name", "点击下方编辑", false, [
'edit' => "text"
])
->addColumn("ispass", "审核状态", false, [
'width' => 100,
'align' => "center",
'toolbar' => "#manageStatus-template"//和addTemplate的id相对应
])
//设置最右侧的toolbar
->addToolColumn("测试", 200)
->addToolbar('edit')
->addToolbar('del')
//右侧位置添加一个按钮,需要把addTableJavascript内注释取消才可以看到
->addToolbar(<<<HTML
<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="icesadmin-test"><i class="layui-icon layui-icon-theme"></i>test</a>
HTML
)
//具体template有哪些使用方式请参考【http://www.layui.com/doc/modules/laytpl.html】
->addTemplate("manageStatus-template", <<<HTML
<input type="checkbox" name="sex" lay-skin="switch" lay-text="开|关" lay-filter="order-status" value="{{ d.id }}" {{ d.ispass == 1 ? 'checked' : '' }}>
HTML
)
//输出新增的这个tools按钮tests,去掉之后才能触发编辑和删除
->addTableJavascript(<<<HTML
//table.on("tool(mytest)", function(obj){
// console.log(obj);
//});
//这一段是触发开关按钮或其他的table内自定义form内容
form.on("switch(order-status)", function(data){
console.log(data);
console.log(data.elem.checked?1:0);
});
HTML
)
//在table的edit完成之后触发的回调
->setEditEvent(<<<HTML
function(obj){
console.log(obj);
}
HTML
)
//添加左上角的按钮,有add添加和del批量删除,也可以自己传入html
->addTableBtn(['add', 'del'])
->addTableBtn("<a class='layui-btn layui-btn-normal'>111</a>")
//设置一下点击编辑按钮打开的【截面位置】【标题】【提交网址】【提交按钮对应的lay-fliter,正常是设置的formname-submit】【渲染完成pop回调】【提交数据回调】
->setTableform("../../manage/view/tableForm", "测试", "/manage/view/tableFormSubmit", 'mytestform-submit', "console.log('render suc')", "")//如果去掉最后一句console.log('submit suc'),就会自动关闭pop窗口并且刷新table
->setPageBreadcrumb(["mytest"=>'后台演示', 'Table'])
->show("/manage/view/tableList");
}
public function tableForm(){
$form = new Form();
return $form
->setFormname("mytestform")
->addText("test", "测试一个")
->show();
}
~~~
- 序言
- 安装
- icesadmin简介
- 设置上方目录所在-setPageBreadcrumb
- 设置页面整体css-setPageStyle
- 设置界面整体js-setPageScript
- Table简介
- 设置table名称-setTablename
- 监听table修改事件-setEditEvent
- 设置右侧按钮点击-setTableform
- 设置上方搜索-setTableSearchForm
- 加入左侧多选-addCheckbox
- 添加一列-addColumn
- 添加右侧操作列-addToolColumn
- 添加右侧操作按钮-addToolbar
- 添加一个列模板-addTemplate
- 添加上方Btn-addTableBtn
- 添加table的js-addTableJavascript
- 添加使用js模块-addConsoleJs
- 最终展示-show
- Form简介
- 设置form初始值-setFormValue
- 设置form名称-setFormname
- 行内联(一行多个)-startInLine
- addConsoleJs
- 设置form的js-addFormJavascript
- table使用-getFormcontrols
- 添加控件(基础)-addControl
- 添加单行输入框-addText
- 添加多行输入-addTextarea
- 添加密码输入框-addPassword
- 图片上传-addUpload
- 文件上传-addWebuploader
- 添加选择器-addSelect
- 添加多选-addMulSelect
- 添加复选框-addCheckbox
- 添加开关-addSwitch
- 添加单选-addRadio
- 添加日期选择-addDate
- 添加编辑器-addUeditor
- 显示-show