layui table不同的值点击执行不同的事件,如何实现?
从php后台获取的数据中,状态一栏有待处理和已处理两种状态,如何实现在待处理的时候点击更新数据,而在已处理的时候点击不被执行。
```JavaScript
<script src="./layui/layui.all.js" charset="utf-8"></script>
<script>
layui.use('table', function () {
var table = layui.table;
var laydate = layui.laydate;
var form = layui.form;
var $ = layui.jquery;
//绑定时间选择器
laydate.render({
elem:'#start'
})
laydate.render({
elem:'#end'
})
var tableIns = table.render({
elem: '#test1'
,url: './demo_data.php'
,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
,title:'demo'
,loading:true
,height:'full-100'
//,totalRow: true //开启合计行(在这里开启合计)
,cols: [
[
{field: 'id', title: 'ID', style: 'font-size:12px'}
, {field: 'qty', title: '查阅数', align:'center', align:'center'}
, {field: 'status', title:'状态',style: 'font-size:12px',templet:SetoState,}
]
],
where:{
}
, page: true
, limits: [50,100,150,200,250,300,350,400,450,500]
, limit: 50 //每页默认显示的数量
});
//头工具栏事件,添加,批量删除
table.on('toolbar(test1)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
var data = checkStatus.data;
console.log(data);
console.log(checkStatus);
switch (obj.event) {
//新增窗口
case 'add':
openAddUser();
break;
});
function SetoState(data) {
var btn = "";
var stylede = data.status;
if (stylede == '待阅') {//如何在待阅的时候,添加点击事件执行update操作?
btn += '<span style="font-size:12px;color:red;font-weight: bold;cursor: pointer; ">待阅</span>';
}
else if(stylede == '已阅'){
btn += '<span style="font-size:12px;color:#1cbb8c;font-weight: bold;">已阅</span>';
}
return btn;
}
后台php数据
<?php
header('Content-type:text/html;charset=utf-8');
// 连接数据库
try {
$pdo = new PDO('mysql:host=127.0.0.1;dbname=demo;port=3306', 'root', 'root');
} catch (PDOException $e) {
die('connet error :' . $e->getMessage());
}
$pdo->exec('set names utf8');
if (isset($_GET['page']) && isset($_GET['limit'])) {
// 分页查询
$start = ($_GET['page'] - 1) * $_GET['limit'] ;
$limit = $_GET['limit'];
$sn = isset($_GET['sn']) ? $_GET['sn']:"%"; //where 条件,这里是姓名做测试,模糊查询
$data = $pdo->query("SELECT
id,
auther,
model,
failure,
announce_date,
content,
sample_picture,
reader,
SUM(length(reader)-length(replace(reader,',',''))+1) as qty,
(case when find_in_set('$ss',reader) >0 then '已阅' else '待阅' end) as status
from demotable group by id order by id desc limit $start, $limit")->fetchAll(PDO::FETCH_ASSOC);
$num = count($pdo->query("SELECT id FROM demotable")->fetchAll(PDO::FETCH_ASSOC));
$json = json_encode(array(
"code" => 0,
"msg" => "",
"count" => $num,
"data" => $data
), JSON_UNESCAPED_UNICODE); //JSON_UNESCAPED_UNICODE注意不加会乱码
echo $json;
}
elseif (isset($_GET['action']) && $_GET['action'] == 'update') { //前端是待阅读的时候点击需要执行的事件
$clean = array();
$clean['id'] = isset($_POST['id']) ? $_POST['id'] : '这个是数据库id';
$del = $pdo->exec("update demotable set reader = concat('$ss',',',reader) where id ='{$clean['id']}'");
if($del >0 ){
echo json_encode(array(
"code" => 1,
"msg" => "success",
"count" => $del,
"data" => array()
));
}else{
echo json_encode(array(
"code" => 1,
"msg" => "error",
"count" => 0,
"data" => array()
));
}
} else {
// 无参数
echo json_encode(array(
"code" => 1,
"msg" => "error",
"count" => 0,
"data" => array()
));
}
```
点击的时候把待处理和已处理状态拿到,再去执行不同的事件