easyUI —— 父表格加載子表格

這裏寫圖片描述

由於之前的文章詳細些了jsp/controller的寫法,此文忽略。只寫js
##JS

var isShow = false;
$(function(){
	index.init();
})
var index = {
	init:function(){
		index.doSearch();
	},
	doSearch:function(){
		$("#product").datagrid({
//			var param = sy.serializeObject($("#productfrom"));獲取參數(下拉選條件等)
//			queryParams:param,傳參數
			columns:[[
			         {	field :'check',checkbox : true,sortable : false,width:'7%'},//選擇框(小方塊)
                      {field:'matter',title:'待辦範圍',width:"15%",align:'center'},
                      {field:'content',title:'待辦內容',width:"15%",align:'center'},
                      {field:'insertTime',title:'提交時間',width:"15%",align:'center'},
                      {field:'insertUserName',title:'提交人',width:"15%",align:'center'},
                      {field:'state',title:'處理狀態',width:"15%",align:'center'},
                      {field:'caozuo',title:'操作',width:"15%",align:'center',formatter:function(value,row,index){
                    	  var str = '<a href="#" οnclick="showTeamPeriod(\''+index+'\',\''+row.state+'\',true,\''+row.dbid+'\')">▼ 團期管理</a>';  
              	          return '<br>'+str;
              	      }},
                      {field:'dbid',title:'dbid',hidden:true}
                    	
             ]],
             rownumbers:true,
             autoRowHeight:true,
             striped:true,
             nowrap:false,
             fit:false,
             checkOnSelect:false,
             loadMsg:'加載中 請稍後...',
             pagination:true,
             pageList:[2,10,15,20],
             pageNumber:1,
             url:contextPath+'/orderCommission/selectAgencyOrderTeamList.do?permission_Key='+permissionKey+'&state=1234567890099',
             loadFilter:function(data){//顯示數據並分頁
                  datas = {'total':0 , 'rows':[]};
                 if(data.succ){
                	 datas.total = data.data.total;
                     datas.rows = data.data.list;
                 }else{
                     $.messager.alert("錯誤提示",data.msg);
                 }
                 return datas;
             },
             onCheck:function(rowIndex,rowData){//選中小方塊
            	 console.log(rowIndex+" "+rowData);
             },
             onUncheck:function(rowIndex,rowData){//取消選中小方塊
            	 console.log(rowIndex+" .. "+rowData);
	          },
           	//設置展開的團期子表
           	view: detailview,
           	detailFormatter:function(index,row){
				
				return '<div style="padding:5px;width:1200px" ><div id="teamInfo1" >'+
				'<a id="addTeamPeriod" class="caissa-btn02" οnclick="addNewTeam(\''+row.dbid+'\')" href="javascript:void(0);">新增團期</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
				'<input name="stateAll'+index+'" οnclick="clickTeamStateAll('+index+')" class="teamCheckall"  type="checkbox"  value="all"/>全部狀態&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
          		'<input name="state'+index+'" οnclick="clickTeamState('+index+')" class="teamCheckbox"  type="checkbox"  value="'+teamStates['TEAM_STATE_7'].code+'"/>'+teamStates['TEAM_STATE_7'].name+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
          		'<input name="state'+index+'" οnclick="clickTeamState('+index+')" class="teamCheckbox"  type="checkbox"  value="'+teamStates['TEAM_STATE_1'].code+'"/>'+teamStates['TEAM_STATE_1'].name+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
          		'<input name="state'+index+'" οnclick="clickTeamState('+index+')" class="teamCheckbox"  type="checkbox"  value="'+teamStates['TEAM_STATE_4'].code+'"/>'+teamStates['TEAM_STATE_4'].name+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
          		'<input name="state'+index+'" οnclick="clickTeamState('+index+')" class="teamCheckbox"  type="checkbox"  value="'+teamStates['TEAM_STATE_5'].code+'"/>'+teamStates['TEAM_STATE_5'].name+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
          		'<input name="state'+index+'" οnclick="clickTeamState('+index+')" class="teamCheckbox"  type="checkbox"  value="'+teamStates['TEAM_STATE_6'].code+'"/>'+teamStates['TEAM_STATE_6'].name+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
          		'<input name="state'+index+'" οnclick="clickTeamState('+index+')" class="teamCheckbox"  type="checkbox"  value="'+teamStates['TEAM_STATE_2'].code+'"/>'+teamStates['TEAM_STATE_2'].name+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
          		'<input name="state'+index+'" οnclick="clickTeamState('+index+')" class="teamCheckbox"  type="checkbox"  value="'+teamStates['TEAM_STATE_3'].code+'"/>'+teamStates['TEAM_STATE_3'].name+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
          		'<input name="state'+index+'" οnclick="clickTeamState('+index+')" class="teamCheckbox"  type="checkbox"  value="'+teamStates['TEAM_STATE_8'].code+'"/>'+teamStates['TEAM_STATE_8'].name+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
          		'<input name="state'+index+'" οnclick="clickTeamState('+index+')" class="teamCheckbox"  type="checkbox"  value="'+teamStates['TEAM_STATE_9'].code+'"/>'+teamStates['TEAM_STATE_9'].name+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
          		'<input name="state'+index+'" οnclick="clickTeamState('+index+')" class="teamCheckbox"  type="checkbox"  value="'+teamStates['TEAM_STATE_10'].code+'"/>'+teamStates['TEAM_STATE_10'].name+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
          		'<input name="state'+index+'" οnclick="clickTeamState('+index+')" class="teamCheckbox"  type="checkbox"  value="'+teamStates['TEAM_STATE_11'].code+'"/>'+teamStates['TEAM_STATE_11'].name+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+

          		'<table class="caissa-tb-line01 caissa-mart5 caissa-alignce">'+
                '<tr><td  class="caissa-alignle" colspan="10" style="background:#C1C1C1; height:30px">'+
                '<input  hidden="true" id="allTeamPeriod'+index+'" type="checkbox"  value="all"/>'+
                '<a href="#" class="caissa-btn08" οnclick="publishTeam('+index+');">上架</a>'+
                '<a href="#" class="caissa-btn08" οnclick="unPublishTeam('+index+');">下架</a>'+
                '<a href="#" class="caissa-btn08" οnclick="submitTeam('+index+');">提交審覈</a>'+
                '<a href="#" class="caissa-btn08" οnclick="deleteTeam('+index+');">刪除</a>'+
                '<a href="#" class="caissa-btn08" οnclick="batchTeamDelete();">批量刪除</a>'+
                '<a href="#" class="caissa-btn08" οnclick="showEditTeamWin(\''+row.dbid+'\');">批量修改團期</a>'+
                '<a href="#" class="caissa-btn08" οnclick="batchUpdateTeamStock(\''+row.dbid+'\');">批量調整庫存</a>'+
                '<a href="#" class="caissa-btn08" οnclick="addTotoList('+index+');">增加待辦事項</a>'+
                '</td></tr></table>'+
          		'</div> <table id="teamSubGrid"></table></div>';
			},
			onExpandRow: function(index,row){
				var ddv = $(this).datagrid('getRowDetail',index).find('#teamSubGrid');
				
				//teamIdUnCheck.splice(0,teamIdUnCheck.length);
				//teamIdCheck.splice(0,teamIdCheck.length);
				ddv.datagrid({
					
					idField:'dbid',
					url:contextPath+'/orderCommission/selectAgencyOrderTeamList.do?permission_Key='+permissionKey+'&state=1234567890099',
					columns:[[
						         {	field :'check',checkbox : true,sortable : false,width:'7%'},//選擇框(小方塊)
			                      {field:'matter',title:'待辦範圍',width:"15%",align:'center'},
			                      {field:'content',title:'待辦內容',width:"15%",align:'center'},
			                      {field:'insertTime',title:'提交時間',width:"15%",align:'center'},
			                      {field:'insertUserName',title:'提交人',width:"15%",align:'center'},
			                      {field:'state',title:'處理狀態',width:"15%",align:'center'},
			                      {field:'caozuo',title:'操作',width:"15%",align:'center',formatter:function(value,row,index){
			                    	  var str = '<a href="#" οnclick="showTeamPeriod(\''+index+'\',\''+row.state+'\',true,\''+row.dbid+'\')">▼ 團期管理</a>';  
			              	          return '<br>'+str;
			              	      }},
			                      {field:'dbid',title:'dbid',hidden:true}
			                    	
			             ]],
			        checkOnSelect:false,
					onResize:function(){
						$('#product').datagrid('fixDetailRowHeight',index);
					},
					onLoadSuccess:function(){/*
						teamIdUnCheck.clear();
						teamIdCheck.clear();
						setTimeout(function(){
							$('#product').datagrid('fixDetailRowHeight',index);
						},0);
						if($("#allTeamPeriod"+index).attr("checked") == 'checked'){
							$(this).datagrid('checkAll');
						}else{
							$(this).datagrid('uncheckAll');
						}
						disDetailCheck(index);
		                 //重置高度
		                 $(this).datagrid('resize', {  
		    	            height : "350px" 
		    	        }); 
		                 $("#product").datagrid('resize', {  
			    	            height : "880px" 
			    	     }); 
				     	 var h = $(document).height()-$(window).height()-((10-index)*37);
				     	 $(document).scrollTop(h); 
		                 
					*/},
					rownumbers:true,
					autoRowHeight:true,
					striped:true,
			         nowrap:false,
			         fit:false,
			         fitColumns:true,
			         height:'auto',
			         loadMsg:'加載中 請稍後...',
			         pagination:true,
			         pageList:[2,10,15,20],
			         pageNumber:1,
			         loadFilter:function(resp){//數據和分頁
			              datas = {'total':0,'rows':[]};
			              datas.total = resp.data.total;
		                  datas.rows = resp.data.list;
		                  
//			              datas.total = resp.total;
//			              datas.rows = resp.list;
			              return datas;
			         },
			         onUncheck:function(rowIndex,rowData){
//			        	 teamIdCheck.remove(rowData.dbid);
//		            	 teamIdUnCheck.put(rowData.dbid,rowData.state);
		             },
		             onCheck:function(rowIndex,rowData){
//		            	 teamIdUnCheck.remove(rowData.dbid);
//		            	 teamIdCheck.put(rowData.dbid,rowData.state);
		             },
		             onCheckAll:function(rows){
			            	//解決頁面勾選datagrid 的全選 teamids 爲空的問題
//			            	 isAllSelectDatagrid=true;
			         },
			         onUncheckAll:function(rows){
//			            	 isAllSelectDatagrid=false;
			         },
		             queryParams:{
		            	/* productId:row.dbid,
		            	 states:getTeamState(index)*/
		            	 
		             }
		             
				});
				$('#product').datagrid('fixDetailRowHeight',index);
			}
             
		  });
		
	}
}
function showTeamPeriod(index,state,isOpen,dbid){
	if(!isShow){
		console.log(1);
		//根據傳入的dbid和頁面勾選的所有產品的dbid做判斷,如果相同,則表明當前行是選中的
		var isCheck = false;
		var rows = $('#product').datagrid('getChecked');
		if(rows != null && rows.length > 0 ){
			console.log(2);
			for(i=0;i<rows.length;i++){
				if(dbid == rows[i].dbid){
					isCheck = true
					break;
				}
			}
		}
		if(isCheck == 'true' || isCheck ==  true){
			console.log(3);
			//將團期狀態設置爲不可勾選  "input[name=stateAll"+index+"]
			$("input[name=state"+index+"]").attr('disabled',true);
			$("input[name=stateAll"+index+"]").attr('disabled',true);
			//選中所有團期,並且不可編輯
			/*$("#allTeamPeriod"+index).attr("checked",true);
			$("#allTeamPeriod"+index).attr('disabled',true);*/
		}else{
			console.log(4);
			$("input[name=state"+index+"]").attr('disabled',false);
			$("input[name=stateAll"+index+"]").attr('disabled',false);
			//選中所有團期,並且不可編輯
			/*$("#allTeamPeriod"+index).attr("checked",false);
			$("#allTeamPeriod"+index).attr('disabled',false);*/
		}
		if('true' == isOpen || isOpen == true){//此方法是判斷父行是什麼狀態  子行就把什麼狀態默認勾選上
			console.log(5);
		//這個方法在jsp頁面
			var teamState = selectByProductState(state);
			$("input[name=state"+index+"]").each(function(){
				if(teamState == $(this).attr("value")){
					$(this).attr("checked",true);
				}
			});
		}
		//設置全局變量的值
		selectIndex = index;  
		selectState = state;
		productId = dbid;
		isShow = true;
		$("#product").datagrid('expandRow',index);//加載子表格
        $("#product").datagrid('resize', {  //將父表格變高
            height : "880px" 
        }); 
        
	}else if(isShow){
		console.log(6);
		if(dbid == productId){
			//再次點擊團隊管理,這個時候,收回展開的團期列表,清空之前設置好的全局變量的值
			isShow = false;
			$("#product").datagrid('collapseRow',selectIndex);
			selectIndex = '';  //設置全局變量的值
			selectState = '';
			productId = '';
		}else{
			//再次點擊團隊管理,這個時候,收回展開的團期列表,清空之前設置好的全局變量的值
			isShow = false;
			$("#product").datagrid('collapseRow',selectIndex);
			showTeamPeriod(index,state,'true',dbid)
		}
        $("#product").datagrid('resize', {  
            height : "450px" 
        }); 
	}
	
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章