国产又黄又爽又无遮挡的视频,精品呦女91集,97吻就去吻色五月,深田教师中文字幕在线播放,97国产大学生情侣在线视频,正在播放海南少妇推油自拍,天天透在线播放,按摩被中出,www青青草原,激情AV免费观看

原生js-自定義組件table

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

2023年11月26日 21:51 本文熱度 447

使用方法：

// 渲染table

msCtools.tableDom.common({

columns:columns1 ,

dataSource:dataSource1,

width:'100%',

ischeck:true,

},'tableDOM');

參數(shù)說明：

參數(shù)	說明	類型	可選值
columns	table表格列內(nèi)容設置	options	Key、title、align、width
dataSource	table數(shù)據(jù)	array	——
width	控制表格寬度	String	默認寬800px
ischeck	true/false是否全選	Boolean	默認false
tableid	掛載元素的ID	String	必填

columns與dataSource中的數(shù)據(jù)相對應，沒有對應數(shù)據(jù)的地方顯示為空；

columns表格列內(nèi)容設置，數(shù)組格式：(參數(shù)說明如下)

參數(shù)	說明	類型	可選值
key	字段名	String	必填
title	表頭名	String	必填
align	對齊方式	String	選填
width	列寬度	String	選填
textOver	超出行溢出	Number	選填
ishidden	是否隱藏(true:是，false:否)	Boolean	默認false
render	函數(shù)方法	Function	選填

columns中的render函數(shù)方法，可對當前數(shù)據(jù)進行處理后顯示，也可設置為數(shù)據(jù)操作（編輯、查看、刪除）；

獲取勾選數(shù)據(jù)方法：

msCtools.tableDom.getchecked(tableid)；

源碼：

  var msCtools = {
       conf: {
        host: "",  
        port: "80",
        baseapi: "/api/",
        basepath: "mhc/",
       },
       Table:{
        init:function(param,id){
          var options = {
             columns: [], // 表格列內(nèi)容設置（key:字段名，title：表頭名，align：對齊方式，width：列寬度，textOver：超出行溢出，ishidden：是否隱藏(true:是，false:否)默認false）
             dataSource: [], // 數(shù)據(jù)
             width: '100%', // 寬度，默認100%
             ischeck:false, // 是否勾選(true:是，false:否)，默認false
             style:{
                 skin:'', // 邊框樣式：line線/row行/none無
                 even:false, // 是否開啟隔行背景(true:是，false:否)，默認false
                 evenColor:['#fff','#EEF0F2'], // 隔行背景顏色設置
             },
             colClassName:'',
          }
          if (param && {}.toString.call(param) === '[object Object]') {
             for (let attr in param) {
                options[attr] = param[attr]
             }
          }
          // 參數(shù)格式校驗：columns必須為數(shù)組且key不重復，dataSource必須為數(shù)組
          if(!Array.isArray(options.columns)) {
             console.log('錯誤：傳入columns必須為數(shù)組');
          } else {
             for(let i = 0; i < options.columns.length; i++) {
                 for(let j = i + 1; j < options.columns.length; j++) {
                    if(!options.columns[i].key) {
                        console.log('key不存在')
                        break;
                    } else {
                        if(options.columns[i].key === options.columns[j].key) {
                           console.log('key重復')
                           break;
                        }
                    }
                 }
             }
          }
          if(!Array.isArray(options.dataSource)) {
             console.log('錯誤：傳入dataSource必須為數(shù)組');
          }
          if(options.style === null || typeof options.style !== "object") {
             console.log('錯誤：style參數(shù)必須為對象');
          }
          if(options === null || typeof options !== "object") {
             console.log('錯誤：參數(shù)必須為對象');
          }
          // 賦值
          this.cols = options.columns;
          this.data = options.dataSource;
          this.width = options.width;
          this.ischeck = options.ischeck;
          this.style = options.style;
          this.colClassName = options.colClassName;
          this.id = id;
          this.content = document.getElementById(id);
          // 創(chuàng)建dom節(jié)點
          this.creatDom();
      },
      // 創(chuàng)建節(jié)點
      creatDom:function(){
          var table = document.createElement('table');
             table.className = 'table_style';
          // 表格邊框的寬度
          table.setAttribute('border','0');
          // 單元格之間的空白
          table.setAttribute('cellspacing','0');
          // 單元邊沿與其內(nèi)容之間的空白
          table.setAttribute('cellpadding','10px');
          
          // table邊框樣式：line線/row行/none無
          if(this.style.skin == 'line'){
             // 外側(cè)邊框的哪個部分是可見的
             table.setAttribute('frame','box');
             // 內(nèi)側(cè)邊框的哪個部分是可見的
             table.setAttribute('rules','all');
          }else if(this.style.skin == 'row'){
             // 外側(cè)邊框的哪個部分是可見的
             table.setAttribute('frame','box');
             // 內(nèi)側(cè)邊框的哪個部分是可見的
             table.setAttribute('rules','rows');
          }else if(this.style.skin == 'none'){
             // 無邊框
          }
          
          // 設置寬
          table.setAttribute('width',this.width);
          
          var thead = this.creatThead();
          var tbody = this.creatTbody();
          table.appendChild(thead);
          table.appendChild(tbody);
          this.content.appendChild(table);
            },
            // 創(chuàng)建thead
            creatThead:function(){
               var thead = document.createElement('thead');
               var tr = document.createElement('tr');
                   tr.className = 'table_cols';
                   tr.classList.add(this.colClassName);
               // 是否勾選ischeck( true / false )
               if(this.ischeck){
                   var th = document.createElement('th');
                      th.id = 'ischeck_th';
                      th.className = 'ischeck_inp'
                   var input = document.createElement('input');
                      input.type = 'checkbox';
                      input.setAttribute('style','vertical-align: middle;');
                      var content = this.content;
                      input.onchange = function(e){
                          if(e.target.checked){ 
                             // 選中全選
                             console.log('觸發(fā)選中全選');
                             msCtools.Table.allCheck(content,true);
                          }else{ 
                             // 取消全選
                             console.log('觸發(fā)取消全選');
                             msCtools.Table.allCheck(content,false);
                          }
                      }
                   var span = document.createElement('span');
                      span.id = 'ischeck_title';
                      span.innerText = '全選';
                   th.appendChild(input);
                   th.appendChild(span);
                   tr.appendChild(th);
               }
               var lenn = this.cols.length;
               for(var i=0;i<lenn;i++){
                   // 非隱藏
                   if( !this.cols[i].ishidden){
                      var th = document.createElement('th');
                          th.innerText = this.cols[i].title;
                      tr.appendChild(th);
                   }
               }
               thead.appendChild(tr);
               return thead;
            },
            // 創(chuàng)建tbody
            creatTbody:function(){
               var tbody = document.createElement('tbody');
               var lenn = this.data.length;
               for(var i=0;i<lenn;i++){
                   var tr = document.createElement('tr');
                   // 是否開啟隔行背景
                   if(this.style.even){
                      if(this.style.evenColor){
                          if(this.style.evenColor.length > 1){
                             var result = i % 2 == 0 ? this.style.evenColor[0] : this.style.evenColor[1];
                          }else{
                             var result = i % 2 == 0 ? '#ffffff' : '#e4e0e0';
                          }
                      }else{
                          var result = i % 2 == 0 ? '#ffffff' : '#e4e0e0';
                      }
                      tr.setAttribute('style','background-color:'+result)
                   }
                   // 是否勾選ischeck
                   if(this.ischeck){
                      var td = document.createElement('td');
                          td.className = 'ischeck_inp'
                      var input = document.createElement('input');
                          input.type = 'checkbox';
                          input.setAttribute('style','vertical-align: middle;');
                          input.setAttribute('set-data',this.data[i].id);
                          // var set_data1 = JSON.stringify(this.data[i]);
                          // input.setAttribute('set-data1',set_data1);
                          input.onchange = function(e){
                             if(e.target.checked){ 
                                 // console.log('觸發(fā)選中')
                             }else{ 
                                 // console.log('觸發(fā)取消')
                             }
                          }
                      td.appendChild(input);
                      tr.appendChild(td);
                   }
                   var lenn_cols = this.cols.length;
                   for(var f=0;f<lenn_cols;f++){
                      // 非隱藏
                      if( !this.cols[f].ishidden){
                          var td = document.createElement('td');
                          var span = document.createElement('span');
                          if(this.cols[f].render && typeof this.cols[f].render === 'function'){
                             // 執(zhí)行render函數(shù)，傳入行值和列值，并且獲得返回值
                             let render = this.cols[f].render(this.data[i][this.cols[f].key], this.data[i]);
                             // 如果返回值是一個dom節(jié)點，則向td里插入節(jié)點
                             if(typeof render === "object") {
                                 td.classList.add('toolBtn')
                                 td.appendChild(render);
                             } else {
                                 // 否則直接innerHTML
                                 span.innerHTML = render;
                             }
                          }else{
                             // 直接插入對應值
                             span.innerText = this.data[i][this.cols[f].key];
                          }
                          var td_style = '';
                          // 設置對齊方式
                          if(this.cols[f].align){
                             td_style += 'text-align:'+this.cols[f].align+';';
                          }
                          // 設置列寬
                          if(this.cols[f].width){
                             td_style += 'width:'+this.cols[f].width+';';
                          }
                          // 設置滿行溢出
                          var textOver = 1;
                          if(this.cols[f].textOver){
                             textOver = this.cols[f].textOver;
                          }
                          span.setAttribute('style','overflow : hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: '+textOver+'; -webkit-box-orient: vertical;')
                          td.setAttribute('style',td_style);
                          td.appendChild(span);    
                          tr.appendChild(td);  
                      }
                   }
                   tbody.appendChild(tr);
               }
               return tbody;
            },
            // 數(shù)據(jù)操作
            tools:function(arry,data,cb){
               let func = function(){};
               if (cb && {}.toString.call(cb) === '[object Function]') {
                   func = cb
               }
               var lenn = arry.length;
               var btns = document.createElement('div');
                   btns.classList.add('tooldivBtn');
               for(var i=0;i<lenn;i++){
                   // 事件類型：type，文字：text，樣式：classname
                   let element = document.createElement('a');
                   element.innerHTML = arry[i].text;
                   element.type = arry[i].type;
                   element.className = arry[i].classname;
                   var type = arry[i].type;
                   element.onclick = function(e){
                      // 回調(diào)函數(shù)：data點擊行數(shù)據(jù)，type點擊事件的執(zhí)行類型：刪除、修改....
                      func(data,e.target.type)
                   }
                   btns.appendChild(element)
               }
               return btns;
            },
            // 獲取選中數(shù)據(jù)
            getchecked:function(id){
               var content = document.getElementById(id);
               var table = content.queryselector('table');
               var tbody = table.queryselector('tbody');
               var node_checks = tbody.queryselectorAll('.ischeck_inp');
               var data = [];
               for(var i=0;i<node_checks.length;i++){
                   var item = node_checks[i];
                   var input = item.queryselector('input[type="checkbox"]');
                   if(input.checked){
                      // var itm = input.getAttribute('set-data1');
                      //  itm = JSON.parse(itm);
                      var itm = input.getAttribute('set-data');
                      data.push(itm);
                   }
               }
               return data
            },
            // 全選/取消
            allCheck:function(content,ischeck){
               var table = content.queryselector('table');
               var tbody = table.queryselector('tbody');
               var node_checks = tbody.queryselectorAll('.ischeck_inp');
               for(var i=0;i<node_checks.length;i++){
                   var item = node_checks[i];
                   var input = item.queryselector('input[type="checkbox"]');
                      input.checked = ischeck;
               }
            }
        },
       }

css樣式：

  /* table 默認樣式 */
  .table_style{border-color: #e4e0e0;padding: 0;margin: 0;}
  .table_style tbody td{color: #666666;font-size: 14px;}
  .table_cols{background-color:#EEF0F2;color: #333;text-align: center;line-height: 40px;}
  .table_cols th{padding: 0 15px;font-size: 14px;color: #333;font-weight: normal;}
  .ischeck_inp{padding-left: 15px;min-width: 50px;}
  .table_style .toolBtn a{padding: 3px 10px;border: 1px solid #999;border-radius: 4px;margin-right: 10px;cursor: pointer;}

使用實例：html

  <!DOCTYPE html>
  <html>
       <head>
        <meta charset="utf-8">
        <title>測試實例</title>
        <style type="text/css">
            /* table 自定義 */
            .zdy_cols{
               background-color:#01AAED;
             color: #fff;
             text-align: center;
             line-height: 60px;
          }
          .zdy_cols th{padding: 0 25px;font-size: 14px;font-weight: normal;} 
      </style>
      <script src="msCtools.js"></script>
     </head>
     <body>
      <div id="ctools_table"></div>
      <button onclick="getdata()">獲取數(shù)據(jù)</button>
     </body>
     <script>
     var data = [
          {id:'001', name:'還是等會計法恒生科技粉紅色快遞費數(shù)據(jù)庫',age:12,job:'盡快盡快'},
          {id:'002', name:'lili',age:12,job:'鼎折覆餗老看到集福卡了束帶結(jié)發(fā)SDK福建省看到了附加速度快的說法可接受的開發(fā)收到了的看法是打開房間塞德里克肯德基首付款'},
          {id:'003', name:'lili',age:12,job:'盡快盡快'}
     ]
     msCtools.Table.init({
      columns:[
          {key: 'id',title: 'id', align: 'center',width:'60px'},
          {key: 'name',title: '姓名', align: 'center',width:'60px'}, 
          {key: 'age',title: '年齡',align: 'center',width:'60px'},
          {key: 'job',title: '工作',align: 'center',
                 render:function (text, data){
                    return '<span style="color:green;">'+text+'</span>'
                 }
          },
          {key: 'tools',title: '操作',align: 'center',width:'200px',
                 render:function (text, data){
                    return msCtools.Table.tools([{
                           type:'del',
                           text:'刪除',
                           classname:' toolBtn delBtn'
                        },{
                           type:'edit',
                           text:'修改',
                           classname:'toolBtn editBtn'
                        },{
                           type:'look',
                           text:'查看',
                           classname:'toolBtn lookBtn'
                        }],data,function(e,type){
                           // e:點擊行數(shù)據(jù)
                           // type:點擊事件執(zhí)行類型--刪除、修改、查看
                           if(type == 'del'){
                               console.log('刪除數(shù)據(jù)：')
                               console.log(e)
                           }else if(type == 'edit'){
                               console.log('修改數(shù)據(jù)：')
                               console.log(e)
                           }else if(type == 'look'){
                               console.log('查看數(shù)據(jù)：')
                               console.log(e)
                           }
                        })
                 }
          },
      ],
      dataSource:data,
      width:'800px', // 寬度
      ischeck:true, // 是否勾選
        colClassName:'zdy_cols'
     },'ctools_table');
      
     function getdata(){
      var data = msCtools.Table.getchecked('ctools_table');
      console.log(data);
     }
     </script>
</html>

該文章在 2023/11/26 21:51:33 編輯過

關鍵字查詢

組件

自定義

正在查詢...

點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。

點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運作、調(diào)度、堆場、車隊、財務費用、相關報表等業(yè)務管理，結(jié)合碼頭的業(yè)務特點，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。