layui實(shí)現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能示例
本文實(shí)例講述了layui實(shí)現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能。分享給大家供大家參考,具體如下:
<div style="text-align: center" 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 //全局定義常規(guī)單元格的最小寬度,layui 2.2.1 新增
,page: { //支持傳入 laypage 組件的所有參數(shù)(某些參數(shù)除外,如:jump/elem) - 詳見文檔
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定義分頁布局
//,curr: 5 //設(shè)定初始在第 5 頁
,groups: 1 //只顯示 1 個(gè)連續(xù)頁碼
,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:局部定義當(dāng)前單元格的最小寬度,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');
//執(zhí)行重載
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,這是必須的。
后臺返回?cái)?shù)據(jù)格式
{
"code": 0,
"msg": "",
"count": 4,
"data:{}
}
數(shù)據(jù)表格單元格數(shù)據(jù)修改
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'/classdata.php'
,cellMinWidth: 80 //全局定義常規(guī)單元格的最小寬度,layui 2.2.1 新增
,page: { //支持傳入 laypage 組件的所有參數(shù)(某些參數(shù)除外,如:jump/elem) - 詳見文檔
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定義分頁布局
//,curr: 5 //設(shè)定初始在第 5 頁
,groups: 1 //只顯示 1 個(gè)連續(xù)頁碼
,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:局部定義當(dāng)前單元格的最小寬度,layui 2.2.1 新增
,{field:'description', title: '字段類型'}
,{field:'primaryKey', title: '主鍵'}
,{field:'class', title: '分類'}
,{field:'checkclass', title: '用戶標(biāo)注','edit':'text'}
,{field:'reason', title: '標(biāo)注理由','edit':'text'}
]]
});
//監(jiān)聽單元格編輯
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>
在表格初始化的時(shí)候加上 'edit':'text' 就可以編輯
然后再添加一個(gè)監(jiān)聽的單元格事件
希望本文所述對大家基于layui框架的程序設(shè)計(jì)有所幫助。
相關(guān)文章
js實(shí)現(xiàn)文本框中輸入文字頁面中div層同步獲取文本框內(nèi)容的方法
這篇文章主要介紹了js實(shí)現(xiàn)文本框中輸入文字頁面中div層同步獲取文本框內(nèi)容的方法,實(shí)例分析了javascript操作dom元素的技巧,需要的朋友可以參考下2015-03-03
JavaScript前端實(shí)現(xiàn)拼圖分割效果
這篇文章主要為大家詳細(xì)介紹了如何通過JavaScript前端實(shí)現(xiàn)拼圖分割效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
js彈出層永遠(yuǎn)居中實(shí)現(xiàn)思路及代碼
彈出層永遠(yuǎn)居中的方法有很多,在本文為大家詳細(xì)介紹下使用js是如何輕松實(shí)現(xiàn)的,喜歡的朋友可以參考下2013-11-11
讓網(wǎng)站自動生成章節(jié)目錄索引的多個(gè)js代碼
這篇文章主要介紹了讓博客園博客自動生成章節(jié)目錄索引的多個(gè)js代碼,需要的朋友可以參考下2018-01-01
javascript實(shí)現(xiàn)信息增刪改查的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)信息增刪改查的方法,實(shí)例分析了javascript操作頁面元素實(shí)現(xiàn)針對頁面信息的增刪改查功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07

