原生javaScript手写简单的table.js

最新推荐文章于 2024-08-31 07:39:08 发布

weixin_30379973

最新推荐文章于 2024-08-31 07:39:08 发布

阅读量949

点赞数

文章标签：数据库 javascript ViewUI

原文链接：http://www.cnblogs.com/wang-yi/p/9867131.html

版权

这篇博客详细介绍了如何使用纯JavaScript实现表格的创建、操作和展示，通过实例代码和CSS美化，提供了DEMO演示，帮助读者深入理解原生JS在DOM操作中的应用。

摘要由CSDN通过智能技术生成

! function(global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
        typeof define === 'function' && define.amd ? define(factory) :
        (global.Table = factory());
}(this, function() {
    return function(e) {
        //首先传递的参数必须是对象   否则报错
        function isObject(obj) {
            return typeof obj === 'object' && obj != null;
        }

        function isArray(arr) {
            return arr.constructor === 'Array';
        }

        function create(ele) {
            return _doc.createElement(ele);
        }
        var _doc = document;
        if(!isObject(e) || isArray(e)) {
            throw new Error("数据类型错误");
        }
        
        var _pros ={
                        el : e.el,
                        url : e.url || '',
                        data : e.data || [],
                        sort : typeof e.sort === 'boolean' && e.sort || false,
                        columns : e.columns || [],
                        queryParams : {},
                        rowNumber:typeof e.rowNumber === 'boolean' && e.rowNumber || false,
                        firstCheckBox:typeof e.firstCheckBox === 'boolean' && e.firstCheckBox || false,
                        slectRow:e.slectRow,
                        getSelects:e.getSelects ||''
                    }
        ///ajax(_pros.url, _pros.queryParams, init());
        var table,tableParentNode,thead,tbody,tfoot,rows;
        ~function init() {
            //获取表格的父级元素
            tableParentNode = _doc.querySelector(_pros.el);
            table = create("table");
            table.className = "Table";
            table.id = 'table' + _pros.el;
            tableParentNode.appendChild(table);
            thead = create("thead");
            table.appendChild(thead);
            tbody = create("tbody");
            table.appendChild(tbody);
            tfoot = create("tfoot");    
            table.appendChild(tfoot);
            //添加表头
            var str = "";
            if(_pros.rowNumber) str += "<th style='display:block;width:30px;color:#ccc0;background-color: #cccccc29;'></th>";
            if(_pros.firstCheckBox)str +="<th style='width:30px;color:#ccc0;background-color: #cccccc29;width:130px;'></th>";
            _pros.columns.forEach(function(content) {
                str += "<th>" + content.field + "</th>";
            });
            thead.innerHTML = str;
            innsertTbody();
            innsertTfoot();
        }();

        function innsertTbody() {
            //添加表体
            rows = [];
            _pros.data.forEach(function(content,i) {
                var tr = create("tr");
                var str = "";
                if(_pros.rowNumber)str += "<td style='background-color:rgba(81, 238, 62, 0.64);color:#FFF;display: block;width:30px'>" +(i+1)+ "</td>";
                if(_pros.firstCheckBox) str += "<td style='background-color:rgba(167, 143, 30, 0.21);color:#FFF;width:100px;'><input type='checkbox' style='width:16px;'></input></td>";
                _pros.columns.forEach(function(e) {
                    if(content[e.data]){
                        str += "<td>" + content[e.data] + "</td>";
                    }
                });
                rows.push(content);
                tr.onclick =_callFn;
                tr.innerHTML = str;
                tbody.appendChild(tr);
            })
        }
        
        
        function _callFn(){
            //console.log(this);
            var input = this.querySelector('input');
            if(input)input.checked =!input.checked;
            _pros.slectRow.call(this,rows,this.rowIndex-1);
        }
        
        function _callGetSelects(){
            var inputs = _doc.querySelector('input');
            inputs.forEach(function(){
                if(input.checked){
                    
                }
            })
            _pros.getSelects.call(this,rows,this.rowIndex-1);
        }
        
        function innsertTfoot() {
            //添加表尾
            var tr = create("tr");
            var footstr = "<td style='width:100%'><div>尾页</div><div>1</div> <div>首页</div><button id='exportExcle'>导出EXCLE</button> </td>";
            tr.innerHTML = footstr;
            tfoot.appendChild(tr);
        }

        _doc.querySelector('#exportExcle').onclick = exportExcle;
        //导出EXCLE
        function exportExcle() {
            if(getExplorer() == 'ie') {
                var curTbl = _doc.getElementById("table");
                var oXL = new ActiveXObject("Excel.Application");

                //创建AX对象excel
                var oWB = oXL.Workbooks.Add();
                //获取workbook对象
                var xlsheet = oWB.Worksheets(1);
                //激活当前sheet
                var sel = _doc.body.createTextRange();
                sel.moveToElementText(curTbl);
                //把表格中的内容移到TextRange中
                sel.select;
                //全选TextRange中内容
                sel.execCommand("Copy");
                //复制TextRange中内容
                xlsheet.Paste();
                //粘贴到活动的EXCEL中
                oXL.Visible = true;
                //设置excel可见属性

                try {
                    var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
                } catch(e) {
                    print("Nested catch caught " + e);
                } finally {
                    oWB.SaveAs(fname);

                    oWB.Close(savechanges = false);
                    //xls.visible = false;
                    oXL.Quit();
                    oXL = null;
                    //结束excel进程，退出完成
                    //window.setInterval("Cleanup();",1);
                    idTmr = window.setInterval("Cleanup();", 1);
                }
            } else {
                tableToExcel(table, "报表管理信息")
            }
        }

        var idTmr;

        function getExplorer() {
            var explorer = window.navigator.userAgent;
            //ie
            if(explorer.indexOf("MSIE") >= 0) {
                return 'ie';
            }
            //firefox
            else if(explorer.indexOf("Firefox") >= 0) {
                return 'Firefox';
            }
            //