easyui中表格列之间的换位05

Posted 2021-12-18 lazyli

easyui表格列的换位；需要注意的是，标题变换完后，标题中的属性可能会发生改变，需要处理
<script type="text/javascript" th:inline="none">
    $(function () 
        var cols = [
            title:‘编号‘,field:‘modelId‘,hidden:true,
            title:‘车型名称‘,field:‘modelStandardName‘,
            title:‘车型别名‘,field:‘modelTrivialName‘,
            title:‘国别‘,field:‘modelCountry‘,formatter: function(value,rowData,rowIndex)
                    //后台用1-是定损，0-不是定损，显示的时候需转换下
                    if(rowData[‘modelCountry‘] == ‘20‘)
                        return "进口";
                    else if(rowData[‘modelCountry‘] == ‘21‘)
                        return "国产";
                     else if(rowData[‘modelCountry‘] == ‘22‘)
                        return "合资";
                    
                ,
            title:‘购置价‘,field:‘modelPrice‘,
            title:‘类比价‘,field:‘modelPriceAna‘,
            title:‘厂商‘,field:‘modelFactory‘,
            title:‘品牌‘,field:‘modelBrand‘,
            title:‘车型类型‘,field:‘minName‘,
            title:‘上市时间‘,field:‘modelYear‘,
            title:‘备注‘,field:‘modelRemark‘
        ]
        $("#grid").datagrid(
            //定义标题行所有的列
            columns:[cols],
            //指定数据表格发送ajax请求的地址
            url:basePath + ‘/model/query‘,
            border:false,
            iconCls : ‘icon-forward‘,
            rownumbers:true,
            singleSelect:true,
            toolbar:toolbar,
            fitColumns:true,
            striped : true,
            fit:true,
            pagePosition:‘bottom‘,
            //显示分页条
            pagination:true,
            pageList:[50],
            onLoadSuccess: function (data) 
                drag();
            
        );

        //拖动drag和drop都是datagrid的头的datagrid-cell
        function drag() 
            $(‘.datagrid-header-inner .datagrid-cell‘).draggable(
                revert: true,
                proxy: ‘clone‘
            ).droppable(
                accept: ‘.datagrid-header-inner .datagrid-cell‘,
                onDrop: function (e, source) 
                    //取得拖动源的html值
                    var src = $(e.currentTarget.innerHTML).html();
                    //取得拖动目标的html值
                    var sou = $(source.innerHTML).html();
                    var tempcolsrc;//拖动后源和目标列交换
                    var tempcolsou;
                    var tempcols=[];
                    for (var i = 0; i < cols.length; i++) 
                        if (cols[i].title == sou) 
                            tempcolsrc = cols[i];//循环读一遍列把源和目标列都记下来
                        
                        else if (cols[i].title == src) 
                            tempcolsou = cols[i];
                        
                    
                    for (var i = 0; i < cols.length; i++) 
                        //再循环一遍，把源和目标的列对换
                        var col = 
                            field: cols[i].field,
                            title: cols[i].title,
                            align: cols[i].align,
                            width: cols[i].width
                        ;
                        if (cols[i].title == sou) 
                            col = tempcolsou;
                        
                        else if (cols[i].title == src) 
                            col = tempcolsrc;
                        
                        tempcols.push(col);
                    
                    cols = tempcols;
                    //这个是调换标题的，所以要重新以这个标题加载表格
                    for(var i = 0 ; i < cols.length ; i++)
                        if(cols[i][‘field‘] == ‘modelId‘)
                            cols[i][‘checkbox‘] = true
                        
                        if(cols[i][‘field‘] == ‘modelCountry‘)
                            cols[i][‘formatter‘] = function(value,rowData,rowIndex)
                                //后台用1-是定损，0-不是定损，显示的时候需转换下
                                if(rowData[‘modelCountry‘] == ‘20‘)
                                    return "进口";
                                else if(rowData[‘modelCountry‘] == ‘21‘)
                                    return "国产";
                                 else if(rowData[‘modelCountry‘] == ‘22‘)
                                    return "合资";
                                
                            
                        
                    
                    //调换位置后，cols会重新赋予width,需要清理调width属性，表单生成会自动匹配列宽
                    for(var i = 0 ; i < cols.length ; i++)
                        delete cols[i][‘width‘]
                    
                    $("#grid").datagrid(
                        //定义标题行所有的列
                        columns:[cols],
                        //指定数据表格发送ajax请求的地址
                        url:basePath + ‘/model/query‘,
                        rownumbers:false,
                        singleSelect:false,
                        toolbar:toolbar,
                        fitColumns:true,
                        striped : true,
                        fit:true,
                        pagePosition:‘bottom‘,
                        //scrollbarSize:1,
                        //显示分页条
                        pagination:true,
                        pageList:[50],
                        onLoadSuccess: function (data) 
                            drag();
                        

                    );
                
            );
        
        
        //定义一个工具方法，用于将指定的form表单中所有的输入项转为json数据key:value,key:value
        $.fn.serializeJson=function()
            var serializeObj=;
            var array=this.serializeArray();
            $(array).each(function()
                if(serializeObj[this.name])
                    if($.isArray(serializeObj[this.name]))
                        serializeObj[this.name].push(this.value);
                    else
                        serializeObj[this.name]=[serializeObj[this.name],this.value];
                    
                else
                    serializeObj[this.name]=this.value;
                
            );
            return serializeObj;
        ;
        //点击查询，按条件搜索车型列表
        $("#search").click(function()
            //将指定的form表单中所有的输入项转为json数据key:value,key:value
            var p = $("#searchForm").serializeJson();
            //调用数据表格的load方法，重新发送一次ajax请求，并且提交参数
            $("#grid").datagrid("load",p);
        );


    );
    
</script>