jquery实现表格编辑导出效果代码-html代码-BFW代码库

代码语言：html
所属分类：表格
代码描述：jquery实现表格编辑导出效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html style="height: 100%;width:100%" lang="en">
<head>
    <meta charset="utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>
    String.prototype.trim = function() {
    return this.replace(/^\s+/g,"").replace(/\s+$/g,"");
};
String.prototype.replaceAll  = function(s1,s2){
  return this.replace(new RegExp(s1,"gm"),s2);
};

function StringUtil(){};
StringUtil.isEmpty = function (a) {
    return StringUtil.isNull(a) || a === undefined || a.length === 0;
};
StringUtil.trimEmpty = function (a) {
    return StringUtil.isNull(a) || a.toString().trim().length === 0;
};
StringUtil.isNotEmpty = function (a) {
    return !StringUtil.isEmpty(a);
};
StringUtil.trimNotEmpty = function (a) {
    return !StringUtil.trimEmpty(a);
};
StringUtil.isNull = function (a) {
    return a === null || a=== undefined;
};
StringUtil.hasEmpty = function () {
    for(var i = 0;i<arguments.length;i++){
        if(StringUtil.isEmpty(arguments[i])){
            return true;
        }
    }
    return false;
};
StringUtil.allEmpty = function () {
    for(var i = 0;i<arguments.length;i++){
        if(StringUtil.isNotEmpty(arguments[i])){
            return false;
        }
    }
    return true;
};
StringUtil.hasNull = function () {
    for(var i = 0;i<arguments.length;i++){
        if(StringUtil.isNull(arguments[i])){
            return true;
        }
    }
    return false;
};
StringUtil.trim = function (str) {
    return str == null ? null : str.toString().trim();
};
StringUtil.safeToString = function (a,dv) {
    return !StringUtil.isEmpty(a) ? a : dv;
};
StringUtil.nvl = function (str) {
    var len = arguments.length;
    for(var i=0;i<len;i++){
        if(StringUtil.isNotEmpty(arguments[i])){
            return arguments[i];
        }
    }
    return null;
};
StringUtil.join = function (arr,sec) {
    if(sec === undefined){
        sec = ",";
    }
    var array = [];
    if(arr.constructor===Array){
        array = arr;
    }else if(arr.constructor===String){
        array.push(arr);
    }else if(arr.constructor===Object){
        for(var key in arr){
            array.push(arr[key]);
        }
    }
    return array.join(sec);
};
/**
 * a startwidth b
 */
StringUtil.startWidth = function (a,b) {
    return !StringUtil.hasNull(a,b) && a.indexOf(b) === 0;
};
StringUtil.endWidth = function (a,b) {
    return !StringUtil.hasNull(a,b) && a.indexOf(b) === a.length -b.length;
};

var Tag=function(tagN,inDolt,single){
    var defaultDolt="\"";
    this.dolt=defaultDolt;
    if(inDolt==="\"" || inDolt==="'"){
        this.dolt=inDolt;
    }
    this.tagName=tagN;
    this.attributes={};
    this.id='';
    this.preBodyContent=[];
    this.bodyContent=[];
    this.aftBodyContent=[];
    this.cssContent={};
    var isNull=function(a){
        return a==undefined || a== null || a.length==0;
    };
    if(tagN === 'input'){
        single = true;
    }
    this.isTagType="tag_severlized_123asd";
    this.attr=function(key,value){
        this.saveCheck();
        if(!isNull(key)){
            if(key==="id" || key==="ID" || key==="iD" || key==="Id"){
                if(isNull(value)){
                    this.id=null;
                }else{
                    this.id=value;
                }

            }else if(key==="style"){
                if(!isNull(value)){
                    var cssTemp=value.split(";");
                    for(var i=0;i<cssTemp.length;i++){
                        var ct=cssTemp[i];
                        if(!isNull(ct) && ct.indexOf(":")>-1){
                            var cssKey=ct.split(":")[0];
                            var cssVal=ct.split(":")[1];
                            this.css(cssKey,cssVal);
                        }
                    }
                }
            }else{
                this.attributes[key]=value;
            }
        }
        return this;
    };
    this.css=function(key,value){
        this.saveCheck();
        if(!isNull(key)){
            if(isNull(value)){
                delete this.cssContent[key];
            }else{
                this.cssContent[key]=value;
            }
        }
        return this;
    };
    this.append=function(obj){
        if(!isNull(obj)){
            this.saveCheck();
            if(typeof obj==="string"){
                this.bodyContent.push(obj);
            }else if(obj.isTagType===this.isTagType){
                this.bodyContent.push(obj.toHtml());
            }
        }
        return this;
    };
    this.prepend=function(obj){
        if(!isNull(obj)){
            this.saveCheck();
            if(typeof obj==="string"){
                this.bodyContent.unshift(obj);
            }else if(obj.isTagType===this.isTagType){
                this.bodyContent.unshift(obj.toHtml());
            }
        }
        return this;
    };
    this.aftent=function(obj){
        if(!isNull(obj)){
            this.saveCheck();
            if(typeof obj==="string"){
                this.aftBodyContent.push(obj);
            }else if(obj.isTagType===this.isTagType){
                this.aftBodyContent.push(obj.toHtml());
            }
        }
        return this;
    };
    this.pretent=function(obj){
        if(!isNull(obj)){
            this.saveCheck();
            if(typeof obj==="string"){
                this.preBodyContent.push(obj);
            }else if(obj.isTagType===this.isTagType){
                this.preBodyContent.push(obj.toHtml());
            }
        }
        return this;
    };
    this.name=function(name){
        return this.attr('name',name);
    };
    this.clazz=function(clazz){
        return this.attr('class',clazz);
    };
    this.is=function(tagName){
        return this.tagName===tagName;
    };
    this.setId=function(id){
        this.id=id;
    };
    this.cancleHref=function(){
        return this.attr("href","javascript:void(0);");
    };
    this.onClick=function(f){
        return this.attr("onclick",f);
    };
    this.val=function(v){
        return this.attr("value",v);
    };
    this.title=function(v){
        return this.attr("title",v);
    };
    this.class=function(v){
        var cla = StringUtil.safeToString(this.attributes[v],'');
        if(cla.length > 0){
            cla += ' ';
        }
        cla += v;
        return this.attr("class",cla);
    };

    this.toHtml=function(){
        if(isNull(this.tagName)){
            return '';
        }
        this.saveCheck();
        var res="";
        for(var i=0;i<this.preBodyContent.length;i++){
            res+=this.preBodyContent[i];
        }
        res+="<"+this.tagName;
        if(!isNull(this.id)){
            res+=" id="+this.dolt+this.id+this.dolt;
        }
        for(var k in this.attributes){
            res+=" "+k+"="+this.dolt+this.attributes[k]+this.dolt;;
        }
        var cssCount=0;
        for(var sty in this.cssContent){
            if(!isNull(this.cssContent[sty])){
                if(cssCount==0){
                    res+=" style="+this.dolt;
                }
                res+=sty+":"+this.cssContent[sty]+";";
                cssCount++;
            }
        }
        if(cssCount>0){
            res+=this.dolt;
        }
        if(single === true){
            res+="/";
        }
        res+=">";
        for(var i=0;i<this.bodyContent.length;i++){
            res+=this.bodyContent[i].toString();
        }
        if(single !== true){
            res+="</"+this.tagName+">";
        }
        for(var i=0;i<this.aftBodyContent.length;i++){
            res+=this.aftBodyContent[i].toString();
        }
        return res;
    };
    this.toString=function(){
        return this.toHtml();
    };
    this.saveCheck=function(){
        if(this.attributes==undefined || this.attributes==null){
            this.attributes={};
        }
        if(this.bodyContent==undefined || this.bodyContent==null){
            this.bodyContent=[];
        }
        if(this.cssContent==undefined || this.cssContent==null){
            this.cssContent={};
        }
        if(this.preBodyContent==undefined || this.preBodyContent==null){
            this.preBodyContent=[];
        }
        if(this.aftBodyContent==undefined || this.aftBodyContent==null){
            this.aftBodyContent=[];
        }
        if(isNull(this.dolt)){
            this.dolt=defaultDolt;
        }
    };
    return this;
};
var excelTool ={
    setReadOnly: function(column,obj){
        var type = column['type'];
        var readonly = column['readonly'];
        if(readonly === true){
            if(type === 'input'){
                obj.attr('readonly','readonly');
            }else if(type==='select'){
                //obj.attr("onfocus","this.defaultIndex=this.selectedIndex;").attr("onchange","this.selectedIndex=this.defaultIndex;");
                obj.attr("disabled",'disabled');
            }else if(type==='checkbox' || type==='radio'){
                //obj.attr("onfocus","this.defaultIndex=this.selectedIndex;").attr("onchange","this.selectedIndex=this.defaultIndex;");
                obj.attr("disabled",'disabled');
            }
            obj.css('cursor','not-allowed');
        }
    },
    setCss: function(column,obj){
        var css = column['css'];
        if(StringUtil.isNotEmpty(css)){
            for (let cssKey in css) {
                obj.css(cssKey,css[cssKey]);
            }
        }
    },
    setCellStyle: function(column,obj){
        var cellStyle = column['cellStyle'];
        if(StringUtil.isNotEmpty(cellStyle)){
            var align = cellStyle['align'];
            if(StringUtil.isNotEmpty(align)){
                obj.css('text-align',align);
            }
        }
    },
    buildSelect: function(column,obj){
        var list = column['list'];
        var defaultValue = column['defaultValue'];
        if(StringUtil.isNotEmpty(list)){
            defaultValue = StringUtil.safeToString(defaultValue,'');
            for (let x1 in list) {
                var opt = new Tag('option').append(StringUtil.safeToString(list[x1].v,''));
                var k ;
                opt.val(k = StringUtil.safeToString(list[x1].k,''));
                if(k == defaultValue){
                    opt.attr('selected','selected');
                }
                obj.append(opt);
            }
        }
    },
    inputObj: function(column,r,l){
        var obj = new Tag('input',true);
        var emptyText = column['emptyText'];
        var fieldName = column['fieldName'];
        obj.attr('id',fieldName+"_"+r+"_"+l).name(fieldName);
        obj.attr('type','text').clazz('dreahover');
        if(StringUtil.isNotEmpty(emptyText)){
            obj.attr('placeholder',emptyText);
        }
        this.setReadOnly(column,obj);
        this.setCss(column,obj);
        this.setCellStyle(column,obj);
        return obj;
    },
    selectObj: function(column,r,l){
        var obj = new Tag('select').clazz('dreahover');
        var fieldName = column['fieldName'];
        obj.attr('id',fieldName+"_"+r+"_"+l).name(fieldName);
        excelTool.buildSelect(column,obj);
        this.setReadOnly(column,obj);
        this.setCss(column,obj);
        this.setCellStyle(column,obj);
        return obj;
    },
    checkboxObj: function(column,r,l,type){
        var obj = new Tag('div').clazz('excel-table-checkbox-div');
        var fieldName = column['fieldName'];
        var defaultValue = column['defaultValue'];

        var choices = column['choices'];
        if(StringUtil.isNotEmpty(choices)){
            obj.attr('id',fieldName+"_"+r+"_"+l+"_div").name(fieldName+"_div");
            for (let choicesKey in choices) {
                var ck = new Tag('input',true).clazz('dreahover').attr('id',fieldName+"_"+r+"_"+l+"_"+choicesKey).name(fieldName+"_"+r).attr('type',type).val(choicesKey);
                if(type === 'radio'){
                    if(defaultValue == choicesKey){
                        ck.attr('checked','checked');
                    }
                }else{
                    if(defaultValue== choicesKey || defaultValue.indexOf(","+choicesKey+",") > -1
                        || new RegExp(","+choicesKey+"$","gm").test(defaultValue) || new RegExp("^"+choicesKey+",","gm").test(defaultValue)){
                        ck.attr('checked','checked');
                    }
                }

                var label = new Tag('label').append(StringUtil.safeToString(choices[choicesKey],'')).attr('for',fieldName+"_"+r+"_"+l+"_"+choicesKey);
                ck.aftent(label);
                excelTool.setReadOnly(column,ck);
                obj.append(ck);
            }

        }

        return obj;
    },
    cloneRow: function(table,.........完整代码请登录后点击上方下载按钮下载查看