码迷,mamicode.com
首页 > 其他好文 > 详细

easyui中表格列之间的换位05

时间:2019-06-03 12:33:47      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:osi   llb   rownum   drag   加载   factory   ati   script   sar   

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>

easyui中表格列之间的换位05

标签:osi   llb   rownum   drag   加载   factory   ati   script   sar   

原文地址:https://www.cnblogs.com/lazyli/p/10966674.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!