U.UF.E.Table.load() 初始化表格

函数源码：

//初始化整理table，功能作用： 给外部添加的table元素添加样式和事件
U.UF.E.Table.load = function (tableel) {
    var _table = U.UF.E.Table;  //简写命名空间
    var _tableEl = tableel;
    if (_tableEl.features) return;  //如果已初始化 则直接返回

    _tableEl.features = true;   //代表已初始化过
    var _pelDiv = _tableEl.parentNode;  //父节点的初始化
    var _allTd = _tableEl.querySelectorAll("td");
    _allTd.forEach(function (v) {   /*删除所有display为none的dt元素*/
        $(v).rmAttr("width");
        var _value = $(v).css("display");
        if (_value === "none") {
            v.remove();
        }
    });


    $(_pelDiv).attr("contenteditable", "false");    //无内容的div(表格的父节点) 取消编辑效果
    _pelDiv.style.cssText = "overflow-y:hidden;padding-bottom:5px;padding-right:7px;width:90%";   //_div的样式
    _tableEl.style.cssText = _tableEl.style.cssText + "border-spacing: 0;border-collapse: collapse;position: relative;table-layout:fixed;";
    _table.tableOver(_tableEl);  //添加选中选出事件 防止选中td时 选中外面的元素 而报错
    var _trList = _tableEl.querySelectorAll("tr");
    for (var i = 0, trLen = _trList.length; i < trLen; i++) {
        var _trEl = _trList[i]
        var _tdList = _trEl.querySelectorAll("td");
        for (var j = 0, tdLen = _tdList.length; j < tdLen; j++) {
            var _tdEl = _tdList[j];
            $(_tdEl).css("box-sizing", "border-box");
            $(_tdEl).css("position", "relative");   //此处不能用cssText  因为会覆盖
            $(_tdEl).css("padding", "0");   //此处不能用cssText  因为会覆盖
            _tdEl.style.border = "2px solid rgb(139, 125, 125)";
            var _tdWidth = _tdEl.clientWidth;
            _tdEl.style.width = _tdWidth + "px";    //给td添加width
            var _colRule = $$("div", { style: { position: "absolute", top: 0, left: "-7px", "margin-left": _tdWidth + "px", cursor: "col-resize", width: "10px" }, className: "U_UF_E_Table_colRule" }, _tdEl); //列尺
            _table.loadCell(_tdEl); //初始有合并单元格 的情况
            _table.colExpanding(_colRule); //给列尺 添加左右拉伸事件
            _table.tdDbClick(_tdEl); //添加双击事件
            _table.dragCheckd(_tdEl);    //td拖拽的选中事件
        }
        var _trHeight = Math.max(_trEl.clientHeight, 30);
        _trEl.style.height = _trHeight + "px";
        _trEl.style.position = "relative";
        var _rowRule = $$("div", { style: { position: "absolute", zIndex: "1", left: 0, "margin-top": _trHeight + "px", cursor: "row-resize", height: "3px", width: "100%" }, className: "U_UF_E_Table_rowRule" }, _trEl); //行尺
        _table.rowExpanding(_rowRule);  //行尺 上下拉伸事件
    }
    _tableEl.style.width = _tableEl.clientWidth + "px"; //这个添加width的位置必须放这里
    _table.firstLinePeak(_tableEl);    //第一行tr的所有列尺添加zIndex为1
    _table.rightClick(_tableEl);    //添加右键

}

/**
* 初始有合并单元格 的情况
* tdEl td元素
*/
U.UF.E.Table.loadCell = function (tdEl) {
    var _table = U.UF.E.Table;  //简写命名空间
    var _tableEl = _table.parentSelect(tdEl, "table");   //获取table元素
    var _colSpan = tdEl.colSpan - 1;   //跨了_colSpan列
    var _rowSpan = tdEl.rowSpan - 1;  //跨了_rowSpan行
    if (_colSpan >= 1) {
        for (var i = 0; i < _colSpan; i++) {
            var _newTd = $$("td");
            _newTd.style.display = "none";
            _table.After(tdEl, _newTd);
        }
    }
    if (_rowSpan >= 1) {
        var _tdIndex = _table.index(tdEl);       //获取该td的所在索引
        var _trIndex = _table.index(tdEl.parentNode);  //获取该行tr所在位置
        var _trList = _tableEl.querySelectorAll("tr"); //获取所有的tr

        for (var i = 1; i <= _rowSpan; i++) {    //获取该tr的下_rowSpan个tr
            var _tdList = _trList[_trIndex + i].querySelectorAll("td"); //获取该tr的所有td
            var _td = _tdList[_tdIndex - 1];
            for (var j = 0; j <= _colSpan; j++) {
                var _newTd = $$("td");
                _newTd.style.display = "none";
                _table.After(_td, _newTd);
            }
        }
    }
}

流程图：

 

    作者： 15互联网G5-3 黄伟艺 


    信息录入: 15互联网G5-3 黄伟艺