亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

layui實現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能示例

 更新時間:2020年06月03日 09:46:08   作者:huangyuxin_  
這篇文章主要介紹了layui實現(xiàn)顯示數(shù)據(jù)表格、搜索和修改功能,結合實例形式分析了layui顯示數(shù)據(jù)表格、搜索和修改功能具體界面布局、功能實現(xiàn)相關操作技巧,需要的朋友可以參考下

本文實例講述了layui實現(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 //設定初始在第 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:局部定義當前單元格的最小寬度,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,這是必須的。

后臺返回數(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 //設定初始在第 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:局部定義當前單元格的最小寬度,layui 2.2.1 新增
   ,{field:'description', title: '字段類型'}
   ,{field:'primaryKey', title: '主鍵'}
   ,{field:'class', title: '分類'}
   ,{field:'checkclass', title: '用戶標注','edit':'text'}
   ,{field:'reason', title: '標注理由','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)聽的單元格事件

希望本文所述對大家基于layui框架的程序設計有所幫助。

相關文章

  • JS時間轉換標準格式、時間戳轉換標準格式的示例代碼

    JS時間轉換標準格式、時間戳轉換標準格式的示例代碼

    這篇文章主要介紹了JS時間轉換標準格式、時間戳轉換標準格式的示例代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-05-05
  • p5.js實現(xiàn)簡單貨車運動動畫

    p5.js實現(xiàn)簡單貨車運動動畫

    這篇文章主要為大家詳細介紹了p5.js實現(xiàn)簡單貨車運動動畫,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-10-10
  • JavaScript實現(xiàn)頁面跳轉的方式匯總

    JavaScript實現(xiàn)頁面跳轉的方式匯總

    這篇文章主要介紹了JavaScript實現(xiàn)頁面跳轉的方式匯總的相關資料,需要的朋友可以參考下
    2016-05-05
  • JS數(shù)組方法reduce的妙用分享

    JS數(shù)組方法reduce的妙用分享

    在?JavaScript?中,reduce?是最難理解的數(shù)組方法之一,它是一個強大而靈活的高階函數(shù),下面就來看看?reduce?的妙用之處,希望對大家有所幫助
    2023-02-02
  • JS過濾url參數(shù)特殊字符的實現(xiàn)方法

    JS過濾url參數(shù)特殊字符的實現(xiàn)方法

    本篇文章主要是對JS過濾url參數(shù)特殊字符的實現(xiàn)方法進行了詳細的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2013-12-12
  • 設置和讀取cookie的javascript代碼

    設置和讀取cookie的javascript代碼

    設置和讀取cookie的javascript代碼...
    2007-07-07
  • Javascript中八種遍歷方法的執(zhí)行速度深度對比

    Javascript中八種遍歷方法的執(zhí)行速度深度對比

    關于數(shù)組或對象遍歷,相信很多人都沒有深入觀察過執(zhí)行效率。這是一個曾在群里吵翻天的話題,讀懂后你將成為遍歷效率話題的大師。下面這篇文章主要介紹了Javascript中八種遍歷方法執(zhí)行速度深度對比的相關資料,需要的朋友可以參考下。
    2017-04-04
  • 微信小程序頁面生命周期詳解

    微信小程序頁面生命周期詳解

    這篇文章主要為大家詳細介紹了微信小程序頁面生命周期的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-01-01
  • JavaScript 學習筆記(四)

    JavaScript 學習筆記(四)

    今天繼續(xù)學習JS中的對象,昨天學完了本地對象中的兩個重要對象Array和Date。今天看下內(nèi)置對象Global對象和Math對象。
    2009-12-12
  • Javascript中內(nèi)建函數(shù)reduce的應用詳解

    Javascript中內(nèi)建函數(shù)reduce的應用詳解

    內(nèi)建函數(shù)其實就是內(nèi)置函數(shù),reduce函數(shù)是ECMAScript5規(guī)范中出現(xiàn)的數(shù)組方法。在平時的工作中,相信大家使用的場景并不多,這篇文章給大家詳細介紹了函數(shù)reduce的應用以及多重疊加,有需要的朋友們可以參考借鑒,下面來一起看看吧。
    2016-10-10

最新評論