Fastadmin的表格切换代码

在Fastadmin中，可以把表格切换成适应手机的形式。这是响应式最重要的一个部分。下面我把我写的代码给大家开源了。

$("#toggleview").on('click', function (e) {
                if($("#table thead").is(":hidden")){
                    //转换table视图
                    $("#table thead").show();
                    var ss = '';
                    $("#datalist tr").each(function(i){
                        var obj = $(this);
                        ss += '<tr data-index="'+i+'">';
                            $.each(eval(pagedata.columns),function(k,v){
                                if(v.isshowlist==1){
                                    switch(k.toLowerCase()){
                                        case 'itemid':
                                            ss += '<td class="bs-checkbox" columnname="'+v.columnenname+'">';
                                            ss += '<input data-index="'+i+'" name="btSelectItem" type="checkbox" value="'+obj.find("div.card-view [columnname='"+k.toLowerCase()+"'] input[type='checkbox']").val()+'" />';
                                        break;
                                        default:
                                            var s4 = obj.find("div.card-view[columnname='"+v.columnenname+"'] span.value").html();
                                            if(typeof(s4)!='undefined'){
                                                ss += '<td columnname="'+k+'">';
                                                ss += s4;
                                            }
                                    }
                                    ss += '</td>';
                                }
                            });

                            ss += '<td columnname="caozuo">';
                                ss += obj.find("div.card-view[columnname='caozuo'] span.value").html();
                                //<a href="javascript:;" class="btn btn-xs btn-danger btn-delone" title=""><i class="fa fa-trash"></i></a>
                            ss += '</td>';
                        ss += '</tr>';
                    });
                    $("#datalist").html(ss);
                }else{
                    //转换cardview视图
                    $("#table thead").hide();
                    var ss = '';
                    $("#datalist tr").each(function(i){
                        var obj = $(this);
                        ss += '<tr data-index="0">';
                        ss += '<td>';
                          ss += '<div class="card-views">';
                            $.each(eval(pagedata.columns),function(k,v){
                                if(v.isshowlist==1){
                                    ss += '<div class="card-view" columnname="'+v.columnenname+'">';
                                    switch(k.toLowerCase()){
                                        case 'itemid':
                                            ss += '<input data-index="'+i+'" name="btSelectItem" type="checkbox" value="'+obj.find("td[columnname='"+k.toLowerCase()+"'] input[type='checkbox']").val()+'" />';
                                        break;
                                        default:
                                            var s4 = obj.find("td[columnname='"+k+"']").html();
                                            if(typeof(s4)!='undefined'){
                                                ss += '<span class="title">'+v.columnname+'</span><span class="value">'+s4+'</span>';
                                            }
                                    }
                                    ss += '</div>';
                                }
                            });
                            ss += '<div class="card-view" columnname="caozuo">';
                                ss += '<span class="title" style="text-align: center; vertical-align: middle; ">操作</span>';
                                ss += '<span class="value">'+obj.find("td[columnname='caozuo']").html()+'</span>';
                              //<span class="value"><a href="/admin/auth/adminlog/detail/ids/1355" class="btn btn-info btn-xs btn-detail btn-dialog" title="详情"><i class="fa fa-list"></i> 详情</a> <a href="javascript:;" class="btn btn-xs btn-danger btn-delone" title=""><i class="fa fa-trash"></i></a></span>
                            ss += '</div>';
                          ss += '</div>';
                        ss += '</td>';
                        ss += '</tr>';
                    });
                    $("#datalist").html(ss);
                }
            });