jq手撸表格table插件

table.js

function Table(id, headData, listData) {
    
    
  this.id = id;
  this.headData = headData || [];
  this.listData = listData || [];
  //初始化表格
  var $table = $('<table class="i-table"><thead><tr></tr></thead><tbody></tbody></table>');
  this.headData.forEach(function(item){
    
    
    $table.find("thead tr").append(`<td ${
      
      item.width ? 'style="width:' + item.width + 'px;flex:0 1 auto;"' : ""}>${
      
      item.label}</td>`);   
  })  
  $("#"+this.id).append($table);
  this.updateData(this.listData);
}
//更新表格tbody
Table.prototype.updateData = function(list) {
    
    
    this.listData = list || [];
    var $table = $("#"+this.id).find("table");
    $table.find("tbody").empty();
    this.listData.forEach(function(listItem, listIndex) {
    
    
        var $tr = $("<tr></tr>")
        this.headData.forEach(function(headItem) {
    
    
            if(headItem.type === "index"){
    
    
                $tr.append(`<td ${
      
      headItem.width ? 'style="width:' + headItem.width + 'px;flex:0 1 auto;"' : ""}>${
      
      listIndex + 1}</td>`);
            }else if(headItem.type === "operation"){
    
    
                var $td = $(`<td ${
      
      headItem.width ? 'style="width:' + headItem.width + 'px;flex:0 1 auto;"' : ""}></td>`);
                if(Array.isArray(headItem.operationList)){
    
    
                    headItem.operationList.forEach(function(operation){
    
    
                        $td.append($(`<span class="operation-btn" data-value="${
      
      operation.value}" οnclick="${
      
      headItem.callback}(${
      
      listIndex},${
      
      operation.value})">${
      
      operation.text}</span>`))
                    })
                }
                $tr.append($td);
            } else {
    
    
                $tr.append(`<td ${
      
      headItem.width ? 'style="width:' + headItem.width + 'px;flex:0 1 auto;"' : ""}>${
      
      listItem[headItem.key]}</td>`);
            }          
        })
        $table.find("tbody").append($tr);
      })
}

table.css

.i-table, .i-table>thead, .i-table>tbody,.i-table>thead>tr,.i-table>tbody>tr{
    
    
    width: 100%;
}
.i-table>thead>tr, .i-table>tbody>tr{
    
    
    display:flex;
    border-bottom: 1px solid #ebeef5;
}
.i-table>thead>tr>td, .i-table>tbody>tr>td{
    
    
    width:0;
    flex: 1;
    word-wrap: break-word;        
}
/** 头部 */
.i-table>thead{
    
    
    background-color:#f7f7f7;
}

.i-table td{
    
    
    padding: 15px 10px;
    font-size:12px;
}
/** 操作栏 */
.i-table .operation-btn {
    
    
    color: #2d8cf0;
    margin-right: 10px;
    cursor: pointer;
}

使用:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>table</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link type="text/css" rel="stylesheet" href="./table.css" />
  </head>
  <body>
    <div id="table"></div>
    <div id="table1"></div>

    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="./table.js"></script>
    <script type="text/javascript">        
		var listData = [
		    {
    
     
		        "DesignName": "test002",
		        "DesignTypeName": "建筑设计",
		        "status": "审核中",
		        "DesignId": "172243318527653551",
		        "srcDom": '',
		        "address":"广东省广州市天河区棠下街道棠东菱角大街",
		    },
		    {
    
     
		        "DesignName": "test003",
		        "DesignTypeName": "景观设计",
		        "status": "驳回",
		        "DesignId": "172243318527653551",
		        "srcDom": '',
		        "address":"广东省广州市天河区棠下街道棠东菱角大街",
		    },
		    {
    
     
		        "DesignName": "test004",
		        "DesignTypeName": "景观设计",
		        "status": "驳回",
		        "DesignId": "172243318527653551",
		        "srcDom": '',
		        "address":"广东省广州市天河区棠下街道棠东菱角大街",
		    },
		    {
    
     
		        "DesignName": "test005",
		        "DesignTypeName": "景观设计",
		        "status": "驳回",
		        "DesignId": "172243318527653551",
		        "address":"广东省广州市天河区棠下街道棠东菱角大街",
		        "srcDom": '<img src="http://img.kinpan.com/Files/design/detailimages/20190807/6370078721387767074231224.jpg" style="width:100%"/>'
		    },
		    {
    
     
		        "DesignName": "test006",
		        "DesignTypeName": "室内设计",
		        "status": "审核中",
		        "DesignId": "172243318527653551",
		        "address":"广东省广州市天河区棠下街道棠东菱角大街",
		        "srcDom": '<img src="http://img.kinpan.com/Files/design/detailimages/20190807/6370078721387767074231224.jpg" style="width:100%"/>'
		    }
		]
		// 操作栏按钮点击回调事件
        function operationCallback (listIndex, operationValue) {
    
    
            console.log("行:", listIndex, "操作按钮值:", operationValue)
        }
        var headData = [
            {
    
    label:'序号', width: 30, type:'index'},
            {
    
    label:'项目名称', key:'DesignName'},
            {
    
    label:'地址', key:'address'},
            {
    
    label:'类型', key:'DesignTypeName'},
            {
    
    label:'认证状态', key:'status'},
            {
    
    label:'图片', key:'srcDom',type:'default'},
            {
    
    
                label:'操作', 
                width: 150, 
                type:'operation',
                callback: 'operationCallback',
                operationList:[
                  {
    
     text:'删除', value: 1 },
                  {
    
     text:'编辑', value: 2 },
                  {
    
     text:'审批', value: 3 },
                ]
            }
        ]        
        var tabel = new Table("table", headData);
        tabel.updateData(listData);   
    </script>
  </body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_43422861/article/details/140824966