溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要用代碼分析layui如何實現顯示數據表格、搜索和修改功能，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
本文實例講述了layui實現顯示數據表格、搜索和修改功能。分享給大家供大家參考，具體如下：
<div id='btn'> <div class="layui-inline"> <input class="layui-input" name="keyword" id="demoReload" autocomplete="off"> </div> <button class="layui-btn" data-type="reload">搜索</button> </div> <table class="layui-hide" id="test"></table>
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'/getdata.php'
,cellMinWidth: 80 //全局定義常規單元格的最小寬度，layui 2.2.1 新增
,page: { //支持傳入 laypage 組件的所有參數（某些參數除外，如：jump/elem） - 詳見文檔
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定義分頁布局
//,curr: 5 //設定初始在第 5 頁
,groups: 1 //只顯示 1 個連續頁碼
,first: false //不顯示首頁
,last: false //不顯示尾頁
}
,cols: [[
{field:'id', width:80, title: 'ID', sort: true}
,{field:'columnname', width:80, title: '字段名'}
,{field:'descriptionCN', width:80, title: '中文描述', sort: true}
,{field:'name', width:80, title: '名稱'}
,{field:'description_table', title: '表描述', width: '30%', minWidth: 100} //minWidth：局部定義當前單元格的最小寬度，layui 2.2.1 新增
,{field:'description', title: '字段類型', sort: true}
,{field:'primaryKey', title: '主鍵', sort: true}
,{field:'class', width:137, title: '分類', sort: true}
]]
});
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
//執行重載
table.reload('test', {
page: {
curr: 1 //重新從第 1 頁開始
}
,where: {
keyword: demoReload.val()
}
});
}
};
$('#btn .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>引用樣式和js，這是必須的。
后臺返回數據格式
{
"code": 0,
"msg": "",
"count": 4,
"data:{}
}數據表格單元格數據修改
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'/classdata.php'
,cellMinWidth: 80 //全局定義常規單元格的最小寬度，layui 2.2.1 新增
,page: { //支持傳入 laypage 組件的所有參數（某些參數除外，如：jump/elem） - 詳見文檔
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定義分頁布局
//,curr: 5 //設定初始在第 5 頁
,groups: 1 //只顯示 1 個連續頁碼
,first: false //不顯示首頁
,last: false //不顯示尾頁
}
,cols: [[
{field:'id', width:80, title: 'ID', sort: true}
,{field:'columnname', width:80, title: '字段名'}
,{field:'descriptionCN', width:80, title: '中文描述', sort: true}
,{field:'name', width:80, title: '名稱'}
,{field:'description_table', title: '表描述', minWidth: 100} //minWidth：局部定義當前單元格的最小寬度，layui 2.2.1 新增
,{field:'description', title: '字段類型'}
,{field:'primaryKey', title: '主鍵'}
,{field:'class', title: '分類'}
,{field:'checkclass', title: '用戶標注','edit':'text'}
,{field:'reason', title: '標注理由','edit':'text'}
]]
});
//監聽單元格編輯
table.on('edit(test)', function(obj){
var value = obj.value //得到修改后的值
,data = obj.data //得到所在行所有鍵值
,field = obj.field; //得到字段
if(value){
$.post('doclass.php',{'id':data.id,'field':field,'value':value},function(data){
console.log(data)
data = $.parseJSON(data);
if(data.status == 1){
layer.msg('修改成功,請等待管理員的審核');
location.href=location.href;
}else{
layer.msg(data.msg);
}
})
}
});
});
</script>在表格初始化的時候加上 'edit':'text' 就可以編輯
然后再添加一個監聽的單元格事件
看完這篇關于用代碼分析layui如何實現顯示數據表格、搜索和修改功能的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
