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) - 詳見(jiàn)文檔
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定義分頁(yè)布局
//,curr: 5 //設(shè)定初始在第 5 頁(yè)
,groups: 1 //只顯示 1 個(gè)連續(xù)頁(yè)碼
,first: false //不顯示首頁(yè)
,last: false //不顯示尾頁(yè)
}
,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: '名稱(chēng)'}
,{field:'description_table', title: '表描述', width: '30%', minWidth: 100} //minWidth:局部定義當(dāng)前單元格的最小寬度,layui 2.2.1 新增
,{field:'description', title: '字段類(lèi)型', sort: true}
,{field:'primaryKey', title: '主鍵', sort: true}
,{field:'class', width:137, title: '分類(lèi)', sort: true}
]]
});
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
//執(zhí)行重載
table.reload('test', {
page: {
curr: 1 //重新從第 1 頁(yè)開(kāi)始
}
,where: {
keyword: demoReload.val()
}
});
}
};
$('#btn .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
引用樣式和js,這是必須的。
后臺(tái)返回?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) - 詳見(jiàn)文檔
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定義分頁(yè)布局
//,curr: 5 //設(shè)定初始在第 5 頁(yè)
,groups: 1 //只顯示 1 個(gè)連續(xù)頁(yè)碼
,first: false //不顯示首頁(yè)
,last: false //不顯示尾頁(yè)
}
,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: '名稱(chēng)'}
,{field:'description_table', title: '表描述', minWidth: 100} //minWidth:局部定義當(dāng)前單元格的最小寬度,layui 2.2.1 新增
,{field:'description', title: '字段類(lèi)型'}
,{field:'primaryKey', title: '主鍵'}
,{field:'class', title: '分類(lèi)'}
,{field:'checkclass', title: '用戶標(biāo)注','edit':'text'}
,{field:'reason', title: '標(biāo)注理由','edit':'text'}
]]
});
//監(jiān)聽(tīng)單元格編輯
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('修改成功,請(qǐng)等待管理員的審核');
location.href=location.href;
}else{
layer.msg(data.msg);
}
})
}
});
});
</script>
在表格初始化的時(shí)候加上 'edit':'text' 就可以編輯
然后再添加一個(gè)監(jiān)聽(tīng)的單元格事件
希望本文所述對(duì)大家基于layui框架的程序設(shè)計(jì)有所幫助。
相關(guān)文章
js實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡制作
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡制作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08
js實(shí)現(xiàn)文本框中輸入文字頁(yè)面中div層同步獲取文本框內(nèi)容的方法
這篇文章主要介紹了js實(shí)現(xiàn)文本框中輸入文字頁(yè)面中div層同步獲取文本框內(nèi)容的方法,實(shí)例分析了javascript操作dom元素的技巧,需要的朋友可以參考下2015-03-03
layui樹(shù)形菜單動(dòng)態(tài)遍歷的例子
今天小編就為大家分享一篇layui樹(shù)形菜單動(dòng)態(tài)遍歷的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JavaScript前端實(shí)現(xiàn)拼圖分割效果
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)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)站自動(dòng)生成章節(jié)目錄索引的多個(gè)js代碼
這篇文章主要介紹了讓博客園博客自動(dòng)生成章節(jié)目錄索引的多個(gè)js代碼,需要的朋友可以參考下2018-01-01
老生常談javascript的類(lèi)型轉(zhuǎn)換
下面小編就為大家?guī)?lái)一篇老生常談javascript的類(lèi)型轉(zhuǎn)換。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
javascript實(shí)現(xiàn)信息增刪改查的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)信息增刪改查的方法,實(shí)例分析了javascript操作頁(yè)面元素實(shí)現(xiàn)針對(duì)頁(yè)面信息的增刪改查功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
自動(dòng)生成文章摘要的代碼[JavaScript 版本]
自動(dòng)生成文章摘要的代碼[JavaScript 版本]...2007-03-03

