解決:easyui中的datagrid詳情展開,combobox的級聯操作,以及修復combobox總是顯示value值的問題

先來看下效果



<script type="text/javascript">
var comboboxData;//項目與部門 field內的combobox data
var datagrid;
	$(function() {
		//輸入url獲得data,用於獲得combobox的值
	    var _url='${pageContext.request.contextPath}/userController/getDepAndProByUid?userId=${sessionInfo.id}';
	    $.ajax({
	    	url:_url,
	    	type:'get',
	    	async:false,//此處必須是同步
	    	dataTye:'json',
	    	success:function(data){
	    		comboboxData=data;
	    	}
	    })
		datagrid=$('#Diarydg')
				.datagrid(
						{
							view : detailview,
							url : "${pageContext.request.contextPath}/diaryController/dataGrid",
							toolbar : "#tool",
							border : false,
							pagination : true,
							fitColumns : true,
							singleSelect : true,
							onClickRow: onClickRow,
							fit : true,
							columns : [ [ {
								field : 'pd',
								title : '項目與部門',
								width : 100,
								formatter:function(value,rowData,rowIndex){//此處爲解決總是顯示value問題的關鍵
									for(var i=0; i<comboboxData.length; i++){
										if(comboboxData[i].value==value){
										return comboboxData[i].label;
										  }
										}
									return "";
								},
								editor:{
									type:'combobox',
									options:{
										valueField:'value',
										textField:'label',
									    data:comboboxData,
									    onSelect:function(record){//此處爲級聯操作的關鍵
									    	 var row = datagrid.datagrid("getSelections");
				                             var rowIndex = datagrid.datagrid('getRowIndex', row[0]);
				                             var target = datagrid.datagrid('getEditor', { 'index': rowIndex, 'field': 'content' }).target;
				                              target.combobox('clear');
				                              console.log(record);
				                                var url = '${pageContext.request.contextPath}/taskController/personTasks?userId=${sessionInfo.id}&depId='+record.value;
				                                target.combobox('reload', url);
									    }
									}
								}
							}, {
								field : 'content',
								title : '任務描述',
								width : 200,
								editor:{
									type:'combobox',
									options:{
										valueField:'value',
										textField:'label',
									    url:'${pageContext.request.contextPath}/taskController/personTasks?userId=${sessionInfo.id}&depId='
									}
								}
							}, {
								field : 'completeness',
								title : '完成度',
								width : 80,
								editor:'combobox'
							}, {
								field : 'workhours',
								title : '工時',
								width : 80,
								editor:'combobox'
							}, {
								field : 'day',
								title : '日期',
								width : 100,
								editor:'datebox' 
						   }, {
								field : 'remark',
								title : '備註',
								width : 150,
							}]],
							detailFormatter : function(rowIndex, rowData) {//此處爲詳情展示的關鍵
								return '<table class="ddv"><tr>'
										+ '<td style="border:0;padding:10px">'
										+ '<p><img src="${pageContext.request.contextPath}/style/images/extjs_icons/award-start/award_star_bronze_1.png"/> <font color="blue">備註</font> :<span class="rem"> </apan></p>'
										+ '</td>' + '</tr> </table>';
							},
							onExpandRow : function(index, row) {
								var rem = $(this).datagrid('getRowDetail',
										index).find('span.rem');
								var html = '<form id="ff" action="${pageContext.request.contextPath}/diaryController/editRemark" method="post"><textarea name="remark" style="width:820px">'
										+ row.remark
										+ '</textarea><br><input name="id"  type="text" value="'+row.id+'" style="display:none"></input><input type="submit" title="保存"></input></form>';
								rem.html(html);
								$('#Diarydg').datagrid('fixDetailRowHeight',
										index);
								$('#ff').form(
										{
											success : function(data) {
										        var	result = $.parseJSON(data);
												if (result.success) {
													$.messager.alert('Info',
															'添加備註成功', 'info');
													$('#Diarydg').datagrid(
															'collapseRow',
															index);
													$('#Diarydg').datagrid(
															'reload');
												} else {
													$.messager.alert('Info',
															'修改失敗', 'info');
												}
											}
										});
							}
						});
	});


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章