table列数据修改,按钮样式文本替换记录,至于问题在最下方

提问 未结
2 43
屮你
屮你 2018-12-7
悬赏:50飞吻
版本:layui 浏览器:





<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link href="layui/css/layui.css" rel="stylesheet" />
</head>
<body>
<table id="tabs" lay-filter="lay_tab"></table>
<script src="layui/layui.js"></script>
<script>
layui.use(['layer', 'form','table'], function () {
var $ = layui.jquery,
layer = layui.layer,
table = layui.table,
form = layui.form;
var studentData=[{ID: 100001, StudentName: "小李", State: 0},{ID: 100002, StudentName: "小刚", State: 0},{ID: 100003, StudentName: "小华", State: 0},{ID: 100004, StudentName: "铁柱", State: 0}];
var tables= table.render({
elem: '#tabs'
, height: 'full-60' //高度最大化减去差值
, toolbar: '#toolbarDemo'
, cols: [[
{ type: 'numbers', title: '序号', width: 90, sort: true, fixed: 'left' }
, { field: 'ID', title: 'ID', width: 90, sort: true, fixed: 'left' }
, { field: 'StudentName', title: '姓名', width: 100 }
, { field: 'State', title: '状态', width: 100, templet: function (d) { return btText(d.State); } }
, { fixed: 'right', title: '操作', width: 80, align: 'center', toolbar: '#Control' }
]],
data:studentData
});
//监听行工具条
table.on('tool(lay_tab)', function (obj) {
var data = obj.data, Id = data.ID;
if (obj.event === 'select') {
atten(obj);
}
});
//头工具栏事件
table.on('toolbar(lay_tab)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'allduty':
tableReset(2);
break;
case 'reset':
tableReset(0);
break;
case 'save':
layer.prompt({ title: '请填写考勤备注,并确认', formType: 2, value: '今日表现' }, function (remark, index) {
layer.close(index);
layer.msg(JSON.stringify(table.cache.tabs));
});

break;
};
});
var atten = function (obj) {
var data = obj.data;
var State = 0;
if (data.State < 3) {
State = data.State*1+1
}
obj.update({
State: State
});
$('#con' + data.ID).attr('class', 'layui-btn layui-btn-xs' + btnclass[State]).text(btText(State));
}
var btnclass = ['', ' layui-btn-normal', ' layui-btn-danger', ' layui-btn-warm'];
function btText(d) {
var res = '出勤';
if (d === 1) {
res = '迟到';
} else if (d === 2) {
res = '缺勤';
} else if (d === 3) {
res = '请假';
}
return res;
}
function tableReset(State) {
var Studata = table.cache.tabs;//表格全部数据
for (var i = 0; i < Studata.length; i++) {
Studata[i].State = State;
}
tables.reload({data:Studata });//表格数据更新渲染
//tables.reload({url:null,data:Studata });//后台请求的数据必须把url设置为null 不然还是请求后台
}
});
</script>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="allduty">全部缺勤</button>
<button class="layui-btn layui-btn-sm" lay-event="reset">重置</button>
<button class="layui-btn layui-btn-sm" lay-event="save">保存</button>
</div>
</script>
<script type="text/html" id="Control">
{{# var kaoqin= function(d) {
var type=d.State,resul = "出勤", calss="layui-btn layui-btn-xs";
if (type == '1') {
resul = '迟到';
calss+=' layui-btn-normal';
} else if (type == '2') {
resul = '缺勤';
calss+=' layui-btn-danger';
} else if (type == '3') {
resul = '请假';
calss+=' layui-btn-warm';
}
return '<a id="con'+d.ID+'" class="'+calss+'" lay-event="select">'+resul+'</a>';
}
}}
{{kaoqin(d)}}
</script>
<!-- 最后输出方法, d为表格传来的数据行对象 有谁知道d怎么传进来的告知下-->

</body>
</html>
回帖
  • 海于咸
    2018-12-7
    d有两种方法传。一种是已知json,一种是请求后台。
    请求后台的需要设置url参数。具体你看文档里。
    0 回复
  • 屮你
    7天前
    @海于咸 可能我表述的不清楚, 就是如果我在html页面中写了 <script type="text/html">html</script>,当我要调用的时候如何传参进去,在不使用layui的情况下
    0 回复