jquery表格自动补全插件——datagrid

①在页面中创建一个或多个表格，设定表头，给每一个th添加一个field属性，属性值与后端数据名字相同

<table>
        <thead>
            <tr>
                <th field="id">编号</th>
                <th field="name">姓名</th>
                <th field="headImage" formatter = "imgFormat">头像</th>
                <th field="dept"  formatter = "deptFormat">部门</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <br>
    <br>
    <br>
    <table>
        <thead>
            <tr>
                <th field="id">编号</th>
                <th field="name">姓名</th>
                <th field="headImage" formatter = "imgFormat">头像</th>
                <th field="dept" formatter = "deptFormat">部门</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

②为表格添加一定样式

<style type="text/css">
table {
    width: 600px;
    text-align: center;
}

table td,table th {
    border: 1px solid black;
}
</style>

③创建一个json文件，模拟后台数据

{
    "totalPage":20,
    "totalCount":100,
    "data":[{
        "id":1,
        "name":"tom",
        "headImage":"img/1.jpg",
        "dept":{
            "id":1,
            "name":"开发部"
        }
    },
    {
        "id":2,
        "name":"tonny",
        "headImage":"img/2.jpg",
        "dept":{
            "id":1,
            "name":"人事部"
        }
    }]
}

④扩展datagrid方法，使用$.fn.datagrid = function(){}

//扩展datagrid方法
        $.fn.datagrid = function(options){
            this.each(function(i,ele){
                //读取数据
                /*
                    url:路径
                    $(ele):操作的元素
                */
                loadData(options.url,$(ele));
            })
        }

⑤创建第四步中的loadData方法用于加载数据

function loadData(url,ele){
            $.get(url,function(result){
            
                //console.log(result);
                autoCreateTable(result.data,ele);
            })
        }

⑥加载数据后，我们就要将获取的数据添加到表格中了，接着创建autoCreateTable方法。

//自动创建表
        function autoCreateTable(data,ele){
            //拿到tbody
            var tbody = ele.find("tbody");
            //拿到所有的表头
            var ths = ele.find("th");
            //遍历data
            for(var i = 0;i < data.length;i++){
                var rowData = data[i];
                //创建一个行
                var tr = $("<tr>");
                /*//创建相应的td
                var td1 = $("<td>"+rowData.id+"</td>");
                var td2 = $("<td>"+rowData.name+"</td>");
                var td3 = $("<td>"+rowData.headImage+"</td>");
                var td4 = $("<td>"+rowData.dept+"</td>");
                //把td加入到tr上
                tr.append(td1).append(td2).append(td3).append(td4);
                
                //把tr加入到tbody里
                tbody.append(tr);
                */
                //循环表头
                for(var j = 0;j < ths.length;j++){
                
                    //拿到每一个th
                    var th = ths[j];
                    //拿到field的值
                    var field = $(th).attr("field");
                    
                    //拿到th上面的formatter属性
                    var formatter = $(th).attr("formatter");
                    //创建td
                    var td = null;
                    if(formatter == "imgFormat"){//做判断，是否是对应属性值
                        td = $("<td>"+imgFormat(rowData[field])+"</td>")//如果是，执行这一步
                    
                    }else if(formatter == "deptFormat"){
                        td = $("<td>"+deptFormat(rowData[field])+"</td>")
                    
                    }
                    else{
                    
                        td = $("<td>"+rowData[field]+"</td>")
                    }
                    tr.append(td);
                }
                 tbody.append(tr);
            }
        }

⑦因为表中数据存在着图片、对象等无法直接显示的东西，所以我们需要区分对待

如本例中的头像，部门

                <th field="headImage" formatter = "imgFormat">头像</th>
                <th field="dept" formatter = "deptFormat">部门</th>

为其添加formatter属性，属性名任意取定，添加属性方法

function imgFormat(url){
            return "<img width = 60px src = '"+url+"'/>";
        }
        function deptFormat(data){
            return data.name;
        }

⑧整个流程梳理：

           创建表、添加样式、设置field、formatter属性——>创建datagrid()——>创建loadData()——>创建imgFormat和deptFormat方法——>创建autuCreateTable