溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

用代碼分析layui如何實(shí)現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能

發(fā)布時間：2020-07-18 16:32:46 來源：億速云 閱讀：446 作者：小豬 欄目：web開發(fā)

小編這次要用代碼分析layui如何實(shí)現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

本文實(shí)例講述了layui實(shí)現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能。分享給大家供大家參考，具體如下：

<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 //全局定義常規(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 個連續(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] &#63; active[type].call(this) : '';
 });
 
});
</script>

引用樣式和js，這是必須的。

后臺返回數(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 個連續(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>

在表格初始化的時候加上 'edit':'text' 就可以編輯

然后再添加一個監(jiān)聽的單元格事件

看完這篇關(guān)于用代碼分析layui如何實(shí)現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手