kendoui grid之合并单元格

$(document).ready(function(){
/**
* return false;——跳出所有循环；相当于 javascript 中的 break 效果。
     * return true;——跳出当前循环，进入下一个循环;
*/
var basePath = $('#contextPath').val();
/**
* grid相关的数据
*/
var commonGrids=$("div[xr-ui=XrGrid]");
$.each(commonGrids,function(index,grid){
//此方法可以将"true","false"的字符串类型去掉引号，变成boolean类型
String.prototype.bool = function() { 
    return (/^true$/i).test(this); 
}; 
//判断如果已经加载过了不需重新加载
if($(grid).data("kendoGrid")){
return true;
}
//控件grid的id
var gridId=$(grid).attr("id");
//grid的高度
var xrHeight=$(grid).attr("xr-height");
//grid是否可以进行编辑,默认为不可以编辑
var xrEditable=false;
if($(grid).attr("xr-editable")){
xrEditable=$(grid).attr("xr-editable").bool();
}
//分页的相关信息
var pageData=null;
if($(grid).attr("xr-page")){
pageData=JSON.parse($(grid).attr("xr-page"));
xr_page=pageData.xrpage;//是否分页
xr_page_size=pageData.pageSize;//每页显示的条数
xr_page_sizes=pageData.pageSizes;//可供选择的每页显示的数据条数
}else{
toastr.warning("id为"+gridId+"的控件，"+"自定义属性xr-page的内容必须存在");  
return false;
}
var xrColumns=$(grid).attr("xr-columns");
if(!xrColumns){//属性和内容都不能为空，xrColumns的可能值false,null,undefined,""即空字符串,0,NaN等
toastr.warning("id为"+gridId+"的控件，"+"自定义属性xr-columns的内容必须存在");  
return false;//跳出整个循环
}
//此处得到的是列信息(包含要展示的列的名称，width,对齐方式等)json数组
var jsons = JSON.parse(xrColumns);
var field_names=[];//要查询的列
var model_field={};//此变量用于代替数据源bscItemDataSource的schema下model的数据
var fuzzy_variable=null;//模糊变量(此变量目前暂不确定具体含义，但是不可缺少)
for (var key in jsons){
var subJsons=jsons[key];
var currentParams=subJsons.column
if(typeof(currentParams)==="object"){//表示grid的表头不止一行
    for (var key in currentParams){
   var innerJsons=currentParams[key];
   if(innerJsons.editable){
   model_field[innerJsons.column]=subJsons.editable;
   }
   field_names.push(innerJsons.column);
    }
}else{
field_names.push(subJsons.column);
if(subJsons.editable){
model_field[subJsons.column]=subJsons.editable;
}
}
} 
for(var i=0;i<field_names.length;i++){
if(field_names[i]!=="0 AS xrchecked"){
fuzzy_variable=field_names[i];
break;//跳出for循环
}
}
    //要查询的表
var xrTable=$(grid).attr("xr-table");
if(!xrTable){//属性和内容都不能为空，xrTable的可能值false,null,undefined,""即空字符串,0,NaN等
toastr.warning("id为"+gridId+"的控件，"+"自定义属性xr-table的内容必须存在");
return false;//跳出整个循环
}
//需要查询出来的字段但是不需要显示
var columns_hidden=$(grid).attr("xr-columns-hidden");
//查询的条件
var xrcondition=$(grid).attr("xr-conditions");
if(typeof(xrcondition) == "undefined"){//内容可也空，但是属性必须存在
toastr.warning("id为"+gridId+"的控件，"+"自定义属性xr-conditions必须存在,内容可为空");
return false;//跳出整个循环
}
//查询分组条件
var xrGroupBy=$(grid).attr("xr-group-by");
//查询过滤条件
var xrHaving=$(grid).attr("xr-having");
//查询升序
var xrOrderAsc=$(grid).attr("xr-order-asc");
//查询降序序
var xrOrderDesc=$(grid).attr("xr-order-desc");
/**
* 获得grid的数据源
*/
var bscItemDataSource=null;//展示grid的数据源
if(xr_page){//分页数据源
bscItemDataSource = new kendo.data.DataSource({
transport : {
read : {
url : basePath + "/devVer/jsonPageByQuery",
type : 'post',
dataType : 'json'
},update: {
url : basePath + "/devVer/saveOrUpdate",
type : 'post',
dataType : 'json'
                    },destroy : {
url : basePath + "/devVer/delete",
type : 'post',
dataType : 'json'
},
create : {
url : basePath + "/devVer/saveOrUpdate",
type : 'post',
dataType : 'json'
},
parameterMap : function(
options, operation) {
if (operation === "destroy"
&& options.models) {//删除
var arr=[];
//options.models为要删除的数据数组
$.each(options.models,function(index,item){
arr.push(item.BSC_ITEM$ID)
})
return {
ids : arr.toString()
};
}else if(operation==="update"){//修改
var parameter = {
columns:field_names.toString(),
columnsHidden:columns_hidden,
tables:xrTable,
conditions:xrcondition,
};
return parameter;
}else if(operation==="read"){//读取数据
var parameter = {
columns:field_names.toString(),
columnsHidden:columns_hidden,
tables:xrTable,
conditions:xrcondition,
group:xrGroupBy,
having:xrHaving,
orderAsc:xrOrderAsc,
orderDesc:xrOrderDesc,
page : options.page,// 当前页
pageSize : options.pageSize,//每页的条数
};
return parameter;
}
}
},
schema : {// data为响应到页面的数据
data : function(data) {//操作成功后的回调函数(如：删除成功或者失败)
if(data.results){
return data.results; 
}else if(data.success){
toastr.success(data.message+"!"); 
}else if(!data.success){
toastr.error(data.message+"!");
}
},
total : function(data) {
//此处的目的是当选中全选框之后再次进行翻页时，去掉全选框中的选中
if($(grid).find('input[name="xr_allBox"]').length>0){
$(grid).find('input[name="xr_allBox"]').checked=false;
}
return data.totalCount; // 总条数
},
model: {
                       id:fuzzy_variable,
                   fields: model_field,//此处主要是列的类型，验证的处理
                }
},
batch: xrEditable,//是否可以批量编辑
        pageSize : xr_page_size,
        serverPaging : true,
serverFiltering : false
});
}else{//不分页数据源
bscItemDataSource = new kendo.data.DataSource({
transport : {
read : {
url : basePath + "/devVer/jsonListByQuery",
type : 'post',
dataType : 'json'
},update: {
url : basePath + "/devVer/saveOrUpdate",
type : 'post',
dataType : 'json'
                    },destroy : {
url : basePath + "/devVer/delete",
type : 'post',
dataType : 'json'
},
create : {
url : basePath + "/devVer/saveOrUpdate",
type : 'post',
dataType : 'json'
},
/**
* 当向后台发送请求时，根据不同的请求操作会向后台传递不同的参数
* 如operation的可取值分别为read,create,update,destroy时，传递的参数如下：
*/
parameterMap : function(
options, operation) {
if (operation === "destroy"
&& options.models) {//删除
var arr=[];
//options.models为要删除的数据数组
$.each(options.models,function(index,item){
arr.push(item.BSC_ITEM$ID)//这个地方的BSC_ITEM$ID为暂时写死的死数据
})
return {
ids : arr.toString()
};
}else if(operation==="update"){//修改
var parameter = {
columns:field_names.toString(),
columnsHidden:columns_hidden,
tables:xrTable,
conditions:xrcondition,
};
return parameter;
}else if(operation==="read"){//读取数据
var parameter = {
columns:field_names.toString(),//查询的列
columnsHidden:columns_hidden,//查询的隐藏列
tables:xrTable,//查询的表
conditions:xrcondition,//查询的条件
group:xrGroupBy,
having:xrHaving,
orderAsc:xrOrderAsc,
orderDesc:xrOrderDesc,
};
return parameter;
}
}
},
   batch: xrEditable,//是否可以批量编辑
               schema: {//data为响应到页面的数据
data : function(data) {//操作成功后的回调函数(如：删除成功或者失败)
if(data.success){
toastr.success(data.message+"!"); 
}else if(data.success==false){
toastr.error(data.message+"!");
}else{
return data;//read操作时，返回到页面的数据
}
},
               model: {
                       id:fuzzy_variable,
                   fields: model_field,//此处主要是列的类型，验证的处理
                   }
               }
});
}

bscItemDataSource.fetch(function(){
getData(bscItemDataSource);
    });
//
function getData(bscItemDataSource){
var data = bscItemDataSource.data();
var  clumnList=newCreateDyTable();//clumnList为拼接的表头数据
createGrid(bscItemDataSource,clumnList);
}
//拼接表头
function newCreateDyTable() {
  var  clumnList = [];
        $.each(jsons, function(fieldIndex, subItem) {
        if(typeof(subItem.column)==="object"){//表示列的内容为jsonArray
        var subColumns=[];//为columns
        $.each(subItem.column,function(index,innerItem){
        var innerCommonObj={
            field: innerItem.column,
                title: innerItem.title,
                attributes:{ 
                style:innerItem.style 
          },
          width:innerItem.width,
          template:innerItem.template, 
        }
        subColumns.push(innerCommonObj);
        })
        commonObj={ 
                    field: "",
                    title: subItem.title,
                    columns:subColumns,
               }
        }else{
        var commonObj={};
        if(subItem.type=='xr_check_box'){//表示复选框
        commonObj={ 
                    field: "",
                    title: "<input  type='checkbox' name='xr_allBox' class='check-box' style='text-align: center;'/>",
                    template: '<input type="checkbox" name="xr_subBox"  class="check-box" style="text-align: center;"/>',
                    width:subItem.width,
               }
        }else{
        if(subItem.locked){//grid需要冻结某些列
        commonObj={
        field: subItem.column,
                title: subItem.title,
                attributes:{ 
      style:subItem.style  
          },
          width:subItem.width,
          template:subItem.template,
          locked: true,
      lockable: false,
          } 
        }else{
        commonObj={
        field: subItem.column,
                title: subItem.title,
                attributes:{ 
                style:subItem.style 
          },
          width:subItem.width,
          template:subItem.template,
          } 
        }
         
        }
        }
        clumnList.push(commonObj);
        })
        if(xrEditable){//只有可编辑时，才在最后加上一列删除操作
        clumnList.push({ command: "destroy", title: "&nbsp;", width: 110, });
        }
           return clumnList;
    }
/**
* 生成grid
*/
var globalGrid;
function createGrid(bscItemDataSource,clumnList){
if(JSON.parse($(grid).attr("xr-page")).xrpage){//分页的grid(说明此处的if条件不能换成if(xr_page))
var tempGridData={
dataSource : bscItemDataSource,//grid的数据源
rowNumber : true,
selectable : "simple",//根据实践当此属性被删除时，双击grid的某一行会报错误
height : xrHeight,//grid的高度
pageable : {
refresh : true,
pageSizes : true,
buttonCount : 5,
page : 1,//说明此处的pageSize,pageSizes两个属性的值不能分别换成变量xr_page_size和xr_page_sizes
pageSize : JSON.parse($(grid).attr("xr-page")).pageSize,
pageSizes :JSON.parse($(grid).attr("xr-page")).pageSizes,
messages : {
display : "{0} - {1} 共 {2} 条数据",
empty : "没有要显示的数据",
page : "results",
of : "of {0}", // {0} is total amount of pages
itemsPerPage : "每页条数",
first : "首页",
previous : "前一页",
next : "下一页",
last : "最后一页",
refresh : "刷新"
}
},
columns : clumnList,

/**
* 分页后序号仍旧从1开始重新计算
*/
dataBound : dataBoundMethod,
}
if(xrEditable){
  tempGridData.toolbar=[ "create", "save", "cancel" ];
  tempGridData.editable=true;//表示可编辑的
  tempGridData.navigatable=true;//可导航的
  }
  globalGrid = $(grid).kendoGrid(tempGridData);
}else{//不分页的grid
  var tempGridData={
dataSource : bscItemDataSource,//grid的数据源
rowNumber : true,
selectable : "simple",//根据实践当此属性被删除时，双击grid的某一行会报错误
height : xrHeight,//高度
columns : clumnList,
/**
* 分页后序号仍旧从1开始重新计算
*/
dataBound :dataBoundMethod,
}
  if(xrEditable){
  tempGridData.toolbar=[ "create", "save", "cancel" ];
  tempGridData.editable=true;//表示可编辑的
  tempGridData.navigatable=true;//可导航的
  }
  globalGrid = $(grid).kendoGrid(tempGridData);
}
  
}
/**
* 加载完grid数据后的操作，如合并单元格等
* @returns
*/
function dataBoundMethod(){
       $("#"+gridId+'>.k-grid-content>table').each(function (index, item) {
                $("#"+gridId+'>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function (thIndex,thItem) {
                var dimension_col =1;//当前列数
                var tempObj=null;
                     /**
                      * 由于这个地方考虑到多表头的情况，实际在页面中展示的排列顺序和单行表头的情况并不雷同，
                      * 为了使表头列和数据列相对应，需要循环遍历找到表头列的展示位置，以便正确的合并单元格
                      */
                $.each(jsons, function(fieldIndex, subItem) {
        if(typeof(subItem.column)==="object"){
        $.each(subItem.column,function(innerIndex,innerItem){
           if(innerItem.column==$(thItem).attr("data-field")){
           dimension_col+=field_names.indexOf(innerItem.column);
           tempObj=innerItem;
           }
        })
        }else{
        if(subItem.column==$(thItem).attr("data-field")){
        dimension_col+=field_names.indexOf(subItem.column);
        tempObj=subItem;
          }
        }
                })
                 
                if(tempObj&&tempObj.rowspan){//此处表示这一列需要合并单元格
                        var first_instance = null;
                        var rowspan = 1;
                       $("#"+gridId+'>.k-grid-content>table').each(function (index, item) {
                        $(item).find('tr').each(function (trindex,trItem) {
                            var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')');
                            var aName=dimension_td.text()
                            if(first_instance){
                            var bName=first_instance.text()
                            }
                            if (first_instance == null) {
                                first_instance = dimension_td;
                               
                            } else if (dimension_td.text() == first_instance.text()) {
                                        rowspan++;
                               //判断上一列单元格是否合并，来决定此列是否合并
                                if(dimension_col>1){
                                $(dimension_td).each(function(index,item){
                                if($(item).prev().css("display")=='none'){
                                dimension_td.hide();
                                first_instance.attr('rowspan', rowspan);
                                }else{
                                first_instance = dimension_td;
                                rowspan=1;
                                }
                               
                                })
                                }else{
                                dimension_td.hide();
                                first_instance.attr('rowspan', rowspan);
                                }
                            } else {
                                // this cell is different from the last
                                first_instance = dimension_td;
                                rowspan = 1;
                            }
                        });
                        });
                     }
                })
                   })       
}
/**
* 选中某一个复选框
*/
var clickCommonGrid=$(grid).kendoGrid();
clickCommonGrid.on("click", ".check-box" , function(){
if(this.name=='xr_allBox'){//单击的是全选框
var checked = this.checked
var checkedArr=$(grid).find('input[name="xr_subBox"]');
         $.each(checkedArr, function (index, arr) {
        arr.checked=checked;
     });
         $(clickCommonGrid.data("kendoGrid").dataSource.data()).each(function(index,item){
if(checked){
item.xrchecked=1;
}else{
item.xrchecked=0;
}
})
}else{//单选一个复选框
var dataRows = clickCommonGrid.data("kendoGrid").items();
// 获取行号
var rowIndex = dataRows.index($(this).closest("tr"));
var checked = this.checked;
    var allSubBox = $(grid).find('input[name="xr_subBox"]');
    var resultBoolean=allSubBox.length == $(grid).find('input[name="xr_subBox"]:checked').length ? true : false;
            $(grid).find('input[name="xr_allBox"]')[0].checked=resultBoolean;
            $(clickCommonGrid.data("kendoGrid").dataSource.data()).each(function(index,item){
            if(index==rowIndex){
            if(checked){
item.xrchecked=1;
}else{
item.xrchecked=0;
}
            }
})
}
/*$(clickCommonGrid.data("kendoGrid").dataSource.data()).each(function(index,item){
            console.log(item.xrchecked)
})*/

        });

/**
* 双击打开详情窗口
*/
xr_dbclick=$(grid).attr("xr-dbclick");
if(xr_dbclick){
var selectJson = JSON.parse(xr_dbclick);
clickCommonGrid.on('dblclick', '.k-grid-content tr', function () {
var row = clickCommonGrid.data("kendoGrid").select();  
        var dataItem = clickCommonGrid.data("kendoGrid").dataItem(row); 
        dataItem=JSON.stringify(dataItem);
        //合并jquery对象用$.extend()
    openXrWindow(selectJson.divId,selectJson.width,
selectJson.height,selectJson.minHeight,selectJson.winTitle,
"/home/loadView",{"jsppath":selectJson.url,"jsondata":dataItem})

});
}

})


});