Easyui 多重表格渲染实例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <title>Dynamic Loading in TreeGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true,border:false">
    <div data-options="region:'center',border:false,split:true">
        <div class="form-wrap">
            <form id="pvmForm" method="post">
                <div id="checkItems"></div>
                <div class="form-item2">
                    <label><b>sku信息:</b> </label>
                </div>
                <div class="form-item2">
                    <table class="pvm-table1" id="skuTable">
                        <tr class="sku-head">
                            <td>主商品</td>
                            <td>颜色系列</td>
                            <td>系列属性</td>
                            <td>sku名称</td>
                            <td>外部关联编号</td>
                            <td>产品条码</td>
                        </tr>
                    </table>
                </div>
            </form>
        </div>
    </div>
</div>
<!--<script charset="utf-8" src="/insdep/plugin/kindeditor/kindeditor-all-min.js"></script>-->
<!--<script charset="utf-8" src="/insdep/plugin/kindeditor/lang/zh-CN.js"></script>-->
<script type="text/javascript">
//下拉框
$('#pvmBrand').combobox({
    valueField:'id',
    textField:'value',
    data: [{
        id:1,
        value: 'iphone',
        selected:true
    },{
        id: 2,
        value: '小米'
    },{
        id: 3,
        value: '三星'
    }],
    onSelect:function (record) {
        $(".brand-name").text(record.value);
    }
});
//选择弹窗
function goSelect() {
    $("<div class='diaSelect'></div>").dialog({
        title:'新增根目录',
        width:600,
        height:500,
        cache:false,
        modal:true,
        href:'/boss/Product/navigationmanager/productSelect.ftl',
        buttons:[{
            text:'保存',
            iconCls:'icon-ok',
            handler:function(){
//                        alert(123)
            }
        },{
            text:'关闭',
            iconCls:'icon-no',
            handler:function(){
                $(".diaSelect").dialog('destroy');
            }
        }],
        onClose:function () {
            $(".diaSelect").dialog('destroy');
        }
    })
}

//属性选择
//数据结构，默认三种系列，如果不存在其中系列，结构一样，values:[] 设为空数组
var checkItems ={
    colors:{
        title:'颜色',
        values:[
                {color:'black',checked:false,text:'黑'},
                {color:'white',checked:false,text:'白'},
                {color:'silver',checked:false,text:'银'},
                {color:'gold',checked:false,text:'金'},
                {color:'gold',checked:false,text:'红'},
                {color:'gold',checked:false,text:'绿'}
        ]
    },
    types:{
        title:'手机规格',
        values:[
            {type:'8G',checked:false},
            {type:'16G',checked:false},
            {type:'32G',checked:false},
            {type:'64G',checked:false},
            {type:'128G',checked:false}
        ]
    },
    phoneFroms:{
        title:'版本类型',
        values:[
            {phoneFrom:'港澳台',checked:false},
            {phoneFrom:'美版',checked:false},
            {phoneFrom:'中国大陆',checked:false},
            {phoneFrom:'日韩',checked:false}
        ]
    }
};
//渲染数据
checkItemsSelect(checkItems);

function checkItemsSelect(checkItems){
    var len1=checkItems.colors.values.length;
    var len2=checkItems.types.values.length;
    var len3=checkItems.phoneFroms.values.length;
    var html='';
    //colors
    if(len1>0){
        html+='<div class="form-item2">';
        html+='<label><em class="red">*</em>'+checkItems.colors.title+': </label>';
        html+='<ul class="list-check fix-width">';
        for(var i=0;i<len1;i++){
            html+='<li><input type="checkbox" name="pvmCheck1" class="color-set check-item" '+(checkItems.colors.values[i].checked==false?'':'checked')+'><em class="pvm-color-'+checkItems.colors.values[i].color+'">'+checkItems.colors.values[i].text+'</em><i class="color pvm-color-'+checkItems.colors.values[i].color+'"></i></li>'
        }
        html+='</ul></div>';
        html+='<div class="form-item2"><table class="pvm-table" id="colorTable"><tr><td>颜色名称</td><td>图片(图片至少上传一张，最多五张，建议图片尺寸为800*800px)</td></tr></table></div>'
    }

    if(len2>0){
        html+='<div class="form-item2">';
        html+='<label><em class="red">*</em>'+checkItems.types.title+': </label>';
        html+='<ul class="list-check fix-width">';
        for(var i=0;i<len2;i++){
            html+='<li><input type="checkbox" name="pvmCheck2" class="phone-type check-item" '+(checkItems.types.values[i].checked==false?'':'checked')+'>'+checkItems.types.values[i].type+'</li>'
        }
        html+='</ul></div>';
    }

    if(len3>0){
        html+='<div class="form-item2">';
        html+='<label><em class="red">*</em>'+checkItems.phoneFroms.title+': </label>';
        html+='<ul class="list-check fix-width">';
        for(var i=0;i<len3;i++){
            html+='<li><input type="checkbox" name="pvmCheck3" class="phone-from check-item" '+(checkItems.phoneFroms.values[i].checked==false?'':'checked')+'>'+checkItems.phoneFroms.values[i].phoneFrom+'</li>'
        }
        html+='</ul></div>';
    }
    $("#checkItems").html(html);

    //颜色选择
    $(".color-set").change(function () {
        var colorName=$(this).closest('li').find('em').attr('class');
        var txtName=$(this).closest('li').find('em').text();
        if(this.checked){
            var html='<tr><td>'+txtName+'<i class="color '+colorName+'"></i></td><td><div class="add-img fl"><input type="file" id="navigationImg'+colorName+'"><label for="navigationImg'+colorName+'" class="fl"></label></div></td></tr>';
            $("#colorTable").append(html)
        }else{
            $("#navigationImg"+colorName).closest('tr').remove();
        }
    })

    //复选框change事件
    $(".check-item").bind('change',function () {
        var self=this;
        var tableItems=[];
        //判断是否存在颜色系列
        if(len1>0){
            if(len2>0){
                if(len3>0){
                    $(".color-set").each(function (i,o) {
                        var colorSelf=this;
                        if(colorSelf.checked){
                            var rowItems = new Object();
                            rowItems.colorText=$(colorSelf).closest('li').find('em').text();
                            rowItems.color=$(colorSelf).closest('li').find('em').attr('class').replace('pvm-color-','');
                            rowItems.types=[];
                            tableItems.push(rowItems);
                            $(".phone-type").each(function (i,o){
                                var typeSelf=this;
                                if(typeSelf.checked){
                                    var typeItems=new Object();
                                    typeItems.type=$(typeSelf).closest('li').text();
                                    typeItems.phoneFroms=[];
                                    rowItems.types.push(typeItems);
                                    $(".phone-from").each(function () {
                                        var fromSelf=this;
                                        if(fromSelf.checked){
                                            var phoneItems=new Object();
                                            phoneItems.phoneFrom=$(fromSelf).closest('li').text();
                                            typeItems.phoneFroms.push(phoneItems)
                                        }
                                    })
                                }
                            })
                        }
                    })
                }else{
                    $(".color-set").each(function (i,o) {
                        var colorSelf=this;
                        if(colorSelf.checked){
                            var rowItems = new Object();
                            rowItems.colorText=$(colorSelf).closest('li').find('em').text();
                            rowItems.color=$(colorSelf).closest('li').find('em').attr('class').replace('pvm-color-','');
                            rowItems.types=[];
                            tableItems.push(rowItems);
                            $(".phone-type").each(function (i,o){
                                var typeSelf=this;
                                if(typeSelf.checked){
                                    var typeItems=new Object();
                                    typeItems.type=$(typeSelf).closest('li').text();
                                    typeItems.phoneFroms=[];
                                    rowItems.types.push(typeItems);
                                    var phoneItems=new Object();
                                    phoneItems.phoneFrom='';
                                    typeItems.phoneFroms.push(phoneItems)
                                }
                            })
                        }
                    })
                }
            }else{
                if(len3>0){
                    $(".color-set").each(function (i,o) {
                        var colorSelf=this;
                        if(colorSelf.checked){
                            var rowItems = new Object();
                            rowItems.colorText=$(colorSelf).closest('li').find('em').text();
                            rowItems.color=$(colorSelf).closest('li').find('em').attr('class').replace('pvm-color-','');
                            rowItems.types=[];
                            tableItems.push(rowItems);
                            var typeItems=new Object();
                            typeItems.type='';
                            typeItems.phoneFroms=[];
                            rowItems.types.push(typeItems);
                            $(".phone-from").each(function () {
                                var fromSelf=this;
                                if(fromSelf.checked){
                                    var phoneItems=new Object();
                                    phoneItems.phoneFrom=$(fromSelf).closest('li').text();
                                    typeItems.phoneFroms.push(phoneItems)
                                }
                            })
                        }
                    })
                }else {
                    $(".color-set").each(function (i,o) {
                        var colorSelf=this;
                        if(colorSelf.checked){
                            var rowItems = new Object();
                            rowItems.colorText=$(colorSelf).closest('li').find('em').text();
                            rowItems.color=$(colorSelf).closest('li').find('em').attr('class').replace('pvm-color-','');
                            rowItems.types=[];
                            tableItems.push(rowItems);
                            var typeItems=new Object();
                            typeItems.type='';
                            typeItems.phoneFroms=[];
                            rowItems.types.push(typeItems);
                            var phoneItems=new Object();
                            phoneItems.phoneFrom='';
                            typeItems.phoneFroms.push(phoneItems)
                        }
                    })
                }
            }
        }else{
            //颜色系列值为空执行方法
            if(len2>0){
                if(len3>0){
                    var rowItems = new Object();
                    rowItems.colorText='';
                    rowItems.color='';
                    rowItems.types=[];
                    tableItems.push(rowItems);
                    $(".phone-type").each(function (i,o){
                        var typeSelf=this;
                        if(typeSelf.checked){
                            var typeItems=new Object();
                            typeItems.type=$(typeSelf).closest('li').text();
                            typeItems.phoneFroms=[];
                            rowItems.types.push(typeItems);
                            $(".phone-from").each(function () {
                                var fromSelf=this;
                                if(fromSelf.checked){
                                    var phoneItems=new Object();
                                    phoneItems.phoneFrom=$(fromSelf).closest('li').text();
                                    typeItems.phoneFroms.push(phoneItems)
                                }
                            })
                        }
                    })
                }else{
                    var rowItems = new Object();
                    rowItems.colorText='';
                    rowItems.color='';
                    rowItems.types=[];
                    tableItems.push(rowItems);
                    $(".phone-type").each(function (i,o){
                        var typeSelf=this;
                        if(typeSelf.checked){
                            var typeItems=new Object();
                            typeItems.type=$(typeSelf).closest('li').text();
                            typeItems.phoneFroms=[];
                            rowItems.types.push(typeItems);
                            var phoneItems=new Object();
                            phoneItems.phoneFrom='';
                            typeItems.phoneFroms.push(phoneItems)
                        }
                    })
                }
            }else{
                //types系列和颜色系列为空执行方法
                var rowItems = new Object();
                rowItems.colorText='';
                rowItems.color='';
                rowItems.types=[];
                tableItems.push(rowItems);
                var typeItems=new Object();
                typeItems.type='';
                typeItems.phoneFroms=[];
                rowItems.types.push(typeItems);
                $(".phone-from").each(function () {
                    var fromSelf=this;
                    if(fromSelf.checked){
                        var phoneItems=new Object();
                        phoneItems.phoneFrom=$(fromSelf).closest('li').text();
                        typeItems.phoneFroms.push(phoneItems)
                    }
                })
            }
        }
        showTable(tableItems);
    })
}
//渲染表格数据
function showTable(tableItems) {
    var brandName=$('#pvmBrand').combobox('getText');
    $("#skuTable").html('');
    var tableHtml='<tr class="sku-head"><td>主商品</td><td>颜色系列</td><td>系列属性</td><td>sku名称</td><td>外部关联编号</td><td>产品条码</td></tr>';
    for(var i=0;i<tableItems.length;i++){
        for(var j=0;j<tableItems[i].types.length;j++){
            for(z=0;z<tableItems[i].types[j].phoneFroms.length;z++){
                if(j==0&&z==0){
                    tableHtml+='<tr><td><input type="radio" name="pvmRadio3"></td>';
                    tableHtml+='<td rowspan="'+(tableItems[i].types.length*tableItems[i].types[j].phoneFroms.length)+'"><em class="pvm-color-'+tableItems[i].color+'">'+tableItems[i].colorText+'</em><i class="color pvm-color-'+tableItems[i].color+'"></i></td>';
                    tableHtml+='<td><span class="type">'+tableItems[i].types[j].type+'</span><span class="to-from">'+tableItems[i].types[j].phoneFroms[z].phoneFrom+'</span></td>';
                    tableHtml+='<td><em class="brand-name">'+brandName+'</em> '+tableItems[i].colorText+' '+tableItems[i].types[j].type+' '+tableItems[i].types[j].phoneFroms[z].phoneFrom+'</td>';
                    tableHtml+='<td><input type="text" class="table-input" placeholder="请输入oms编码"></td>';
                    tableHtml+='<td><input type="text" class="table-input" placeholder="请输入产品条码"></td>';
                    tableHtml+='</tr>'
                }else{
                    tableHtml+='<tr><td><input type="radio" name="pvmRadio3"></td>';
//                        tableHtml+='<td rowspan="'+1+'"><em class="pvm-color-'+tableItems[i].color+'">'+tableItems[i].colorText+'</em><i class="color pvm-color-'+tableItems[i].color+'"></i></td>';
                    tableHtml+='<td><span class="type">'+tableItems[i].types[j].type+'</span><span class="to-from">'+tableItems[i].types[j].phoneFroms[z].phoneFrom+'</span></td>';
                    tableHtml+='<td><em class="brand-name">'+brandName+'</em> '+tableItems[i].colorText+' '+tableItems[i].types[j].type+' '+tableItems[i].types[j].phoneFroms[z].phoneFrom+'</td>';
                    tableHtml+='<td><input type="text" class="table-input" placeholder="请输入oms编码"></td>';
                    tableHtml+='<td><input type="text" class="table-input" placeholder="请输入产品条码"></td>';
                    tableHtml+='</tr>'
                }
            }
        }
    }
    $("#skuTable").html(tableHtml);
}
</script>
</body>
</html>
￥打赏
标签:

上一篇：表格合并单元格实例

下一篇：VUX触屏事件实例