layui框架如何放置超链接（layui页面加载简单模式）
layui框架如何放置超链接（layui页面加载简单模式）var html = "";/* $(function(){ <option value="" selected="">请选择描述</option></select>//加载自定义搜索框/*为下拉框id="chosen-select"加载数据type，description（类型与描述两个属性）*/
注意如果方法在layui加载页面之后进行，需要form.render();重新渲染页面
定义模板id
form表单id 加载数据id<table id="table" lay-filter="test"></table>
<select id="chosen-select" lay-filter="type-select">
<option value="" selected="">请选择描述</option>
</select>//加载自定义搜索框
/*为下拉框id="chosen-select"加载数据type，description（类型与描述两个属性）*/
/* $(function(){
var html = "";
$.ajax({
url: '${ctx}/sys/dict/queryTypeList'
success : function(data) {
//加载数据
for (var i = 0; i < data.length; i ) {
html = '<option value="' data[i].type '">' data[i].description '</option>'
}
$("#chosen-select").append(html);
}
});
}); */
/* 定义事件*/
var tableIns;
layui.use(['table' 'laypage'] function(){
var form = layui.form;
var table = layui.table;
var laypage = layui.laypage;
/*监听select框 此方法用以监听id="label"的下拉款事件进行搜索
form.on('select(type-select)' function(data){
var type = data.value;
var storage=window.localStorage;
storage["type"]=type;
var opts = {
label: $("#label").val()
}
reLoad(opts);
}); */
/*渲染数据表格*/
tableIns = table.render({
elem: '#table' //table绑定数据id
url: '${ctx}/origin/business/manager_json'
method: 'post'
cellMinWidth: 80
/* height: 'full-100' */
page: {
layout: ['limit' 'count' 'prev' 'page' 'next' 'skip'] //自定义分页布局
// 限定条数 总数、计数 上一页 页 下一页 到第几页、跳
curr: 1
groups: 10 //显示 连续页码
first: '首页'
last: '尾页'
}
even: true //开启隔行背景
cols: [[ //表头
{field: 'id' title: 'ID' width:50 type:'numbers' sort: true}
{field: 'business_name' title: '企业名称' }
{field: 'business_mobile' title: '企业电话' sort: true}
{field: 'business_addr' title: '企业地址' }
{field: 'createdate' title: '创建时间' }
{field: 'remarks' title: '备注' }
{field: 'delflag' title: '状态' width:80 templet: '#status'}
{fixed: 'right' width:300 align:'center' toolbar: '#toolbar'}
]]
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
templet：前段模板引擎加载自定义事件（d模板中的属性.name取值）
<script type="text/html" id="status">
{{# if(d.delflag == 0) { }}
<button class="layui-btn layui-btn-sm">正常</button>
{{# } else { }}
<button class="layui-btn layui-btn-sm layui-btn-danger">禁用</button>
{{# } }}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
toolbar:cols中的属性用来定义操作按钮，
<script type="text/html" id="toolbar">
<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
</script>
- 1
- 2
- 3
- 4
- 5
- 6
/*监听工具条*/
table.on('tool(test)' function(obj){
var data = obj.data; /*获得当前行数据*/
var layEvent = obj.event; /*获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）*/
var tr = obj.tr; /*获得当前行 tr 的DOM对象*/
if(layEvent === 'detail'){
}else if(layEvent === 'del'){
layer.confirm('真的删除行么' function(index){
layer.close(index);
/*向服务端发送删除指令*/
alert(data.id);
$.ajax({
url : prefix "/delete"
type : "post"
data : {'id' : data.id}
success : function(data) {
if (data.code == 0) {
obj.del(); /*删除对应行（tr）的DOM结构，并更新缓存*/
layer.msg(data.msg);/*后台定义的返回值方法*/
} else {
layer.msg(data.msg);
}
}
});
});
}else if(layEvent === 'edit'){
/*打开修改页面*/
openIframe('修改' '/update_manager/' data.id);
}
});
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
自定义方法
/新增页面/
function add() {
openIframe(‘增加’ ’/add_manager’);
}
>刷新数据 重写刷新方法，不然会走自定义默认方法
/*刷新数据*/
function reLoad(opts) {
tableIns.reload({
page: {
layout: ['limit' 'count' 'prev' 'page' 'next' 'skip'] //自定义分页布局
curr: 1
groups: 10 //显示 连续页码
first: '首页'
last: '尾页'
} where:
opts
});
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- >保存页面方法调用(form提交)
layui.use(['form'] function(){
var form = layui.form;
//监听提交
form.on('submit(submitForm)' function(data){
save();
})
});
/* $("#formSubmit").click(function(){
save()
}); */
/*保存方法*/
function save() {
$.ajax({
cache : true
type : "POST"
url : "${ctx}/origin/business/save_manager"
data : $('#businessForm').serialize() // 你的formid
async : false
error : function(request) {
parent.layer.alert("网络超时");
}
success : function(data) {
if (data.code == 0) {
parent.layer.msg("操作成功");
parent.reLoad();
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
} else {
parent.layer.alert(data.msg);
}
}
});
