这个东西回了后感觉非常简单的,当然这是废话了，什么东西会了肯定都简单了哈哈，当然我在看官方文档的时候也遇到过很多问题，文档有时也不是我们能看就能看懂的,比如这一段
<script type="text/html" id="titleTpl">
{{# if(d.id < 100){ }}
符合条件的内容,其次这里的d.id 就是接口列表的id字段,看着简单实操还是有点难度
{{# } else { }}
{{d.title}}(普通用户)
{{# } }}
</script>
上面这段官方代码也给了，但是绑定又在另外一个地方说明templet: '#titleTpl' 这样才算绑定了，确实找了很久,总之还是要多用才会，文档和教程只写了最基础的东西，然后你想加QQ群去问吧，得到的结果很慢，估计很动人人家都不用那么复杂的逻辑.总之我是还有好多不懂得，因为毕竟如果要很完美的操作，还是要有JS基础滴
还有一点说明下，其实他是内置jquery的，自己去导就可以了
我这里大概说下表格吧
先插入一个试图,然后即可获取数据，当然还有点击事件，以及toolbar 和行事件tool等等等等废话不多说，发一个我写的demo吧
<style type="text/css">
.LAY-component-layer-list{display:none!important;}
#LAY-component-layer-list{display:none!important;}
.layadmin-tabspage-none .layui-layout-admin .layui-body{top: 0px;}
mip-fixed{
display:none!important;
}
.mip-fixedlayer div[mip-semi-fixed-fixedStatus], mip-semi-fixed div[mip-semi-fixed-fixedStatus]{
position:initial!important;
}
</style>
<table class="layui-hide" id="container" lay-filter="container"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<!-- <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button> -->
{{# if(d.status < 5){ }}
<button class="layui-btn layui-btn-sm" lay-event="isAll">停止URL新增</button>
{{# } }}
</div>
</script>
<script type="text/html" id="table-site-list">
{{# if(d.accounts == 0){ }}
<a class="layui-btn layui-btn-xs va1" lay-event="check">验收</a>
{{# } }}
{{# if(d.accounts == 1){ }}
<a class="layui-btn layui-btn-xs fw1" lay-event="accounts">结算</a>
{{# } }}
</script>
<script>
var childIndex;
console.log(childIndex);
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#container'
,url: layui.setter.baseUrl + "home/seoservice/get_orderinfo"
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
,page:true
, where: {
token: layui.data('seo')[layui.setter.request.tokenName],
seoid: childIndex
}
,cols: [[
// {type:'checkbox'}
{field:'id', title: 'ID', width:70}
,{field:'ssyq', title: '搜索引擎', width:80}
,{field:'url', title: '网址'}
, {
title: "操作",
width: 150,
align: "center",
// fixed: "right",
templet: "#table-site-list"
}
]]
});
//头工具栏事件
table.on('toolbar(container)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
break;
case 'isAll':
//layer.msg(checkStatus.isAll ? '停止URL新增': '停止URL新增');
var data = checkStatus.data;
//layer.alert(JSON.stringify(obj));
//console.log(childIndex);
//执行 Ajax 后重载
request.req({
url: layui.setter.baseUrl + "home/seoservice/isstop",
data: { 'id': childIndex,token: layui.data('seo')[layui.setter.request.tokenName] },
async: false,
type: "post",
success: function (res) {
layer.msg(res.msg);
}
})
break;
//自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
};
});
//监听行工具事件
table.on('tool(container)', function(obj){
var data = obj.data;
//console.log(obj)
if(obj.event === 'accounts'){
layer.confirm('确定结算么', function(index){
console.log(data.id);
//执行 Ajax 后重载
request.req({
url: layui.setter.baseUrl + "home/seoservice/accounts",
data: { 'data': data,token: layui.data('seo')[layui.setter.request.tokenName] },
async: false,
type: "post",
success: function (res) {
layer.msg(res.msg);
}
})
obj.del();
layer.close(index);
});
} else if(obj.event === 'check'){
layer.confirm('确定验收么', function(index){
console.log(data.id);
//执行 Ajax 后重载
request.req({
url: layui.setter.baseUrl + "home/seoservice/check",
data: { 'data': data,token: layui.data('seo')[layui.setter.request.tokenName] },
async: false,
type: "post",
success: function (res) {
layer.msg(res.msg);
}
})
obj.del();
layer.close(index);
});
}
});
//获取用户数据
request.req({
url: layui.setter.baseUrl + "home/index/getuser",
data: { token: layui.data('seo')[layui.setter.request.tokenName] },
async: false,
type: "post",
success: function (res) {
var res=eval(res);
if(res.data.data.level == 1){
se(".fw1").attr("style","display:none;");
}else{
se(".va1").attr("style","display:none;");
}
}
});
});
</script>
0条评论