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})

});
}

})


});