subGrid實現內外datagrid都可編輯功能


前一篇文章介紹了如何創建一個擁有subGrid的datagrid,不過僅僅是展示數據,並未涉及到編輯

那么,若是需要subGrid實現可編輯功能該怎么做呢?

要解決這個問題首先得有一個清晰的思路和明確的目標,到底需要將subGrid打造成怎么樣呢?

還是用一個具體的例子來說明問題,就拿最近在做的項目來看吧,有一個需求是這樣的:

1、顯示所有派去維修的記錄(一人一條),且每條記錄有一些費用數據

2、每條派工記錄中有詳細的耗材記錄

3、耗材要有添加修改刪除的功能

這其實就是典型的”一條記錄頭,下面多條明細“的情況,稍微分析一下整理出

1、派工記錄也就是主datagrid中要顯示的數據(subGrid的記錄頭),並且該數據無法添加刪除(該數據從別的表中直接拿過來的),只能修改

2、耗材記錄也就是subGrid中要顯示的數據,可以增刪改

如何展現呢?

1、主datagrid一個toolbar,然后每一個subGrid都有各自的toolbar

2、只有主datagrid一個toolbar,但是卻可以根據情況來執行不同datagrid中的增刪改

要說實現的難度肯定是第一種要小一些,但是我卻鬼使神差的選擇了第二種展現方式,結果碰了不少壁

試試吧!

1、先按照上一篇文章創建好subGrid

2、為需要編輯的列設置editor(包括主datagrid和subGrid)

3、添加兩個公共變量,detailIndex表示當前的主datagrid中的索引,editIndex表示subGrid中編輯行的索引

4、那么何時給兩個變量賦值呢?detailIndex的賦值有2個地方

一是在主datagrid的onClickRow事件中,二是在選中subGrid中的記錄時自動的變成該subGrid的頭記錄,並且將該記錄選中

editIndex的賦值則在“編輯開始”的時候(subGrid的append和onClickRow方法中),這和之前介紹datagrid行編輯那篇文章中的一樣。

5、添加編輯的一些方法,endEditing(), append(), onClickRow(index)等

6、如何寫endEditing(),也就是說在“終止編輯”時我們要做什么

一、校驗該行,若通過則將原記錄去選(防止不在同一個subGrid中)並終止編輯,若不通過則無法終止編輯 二、暫存數據(等所有數據保存完之后一起提交)

    function endEditing(){
        if (editIndex == undefined){
        	return true
        }
        var ddv = $('#consume_table' + detailIndex);
        if (ddv.datagrid('validateRow', editIndex)){	// 驗證通過
        
        	ddv.datagrid('unselectRow', editIndex);// 這里添加一個去選上一個選中項的方法
        	
            ddv.datagrid('endEdit', editIndex);
	        var row = ddv.datagrid('getRows')[editIndex];
	        if(row){
	        	row.detailid = $("#verify_details").datagrid('getRows')[detailIndex]['id'];	// key step
	        	verifyDTO.ddetailsDTOList[detailIndex].consumeList.splice(editIndex, 1, row);
	        }
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }

7、append():先要endEditing(),之后根據detailIndex來決定添加在哪一個subGrid里,並且記錄editIndex

    function append(){
    	if(endEditing()){
	    	if(detailIndex == undefined){
	    		$.messager.alert('錯誤', wrapSpan('請先選擇一個報修記錄'), 'error');
	    		return;
	    	}
	    	var ddv = $('#consume_table' + detailIndex);
		    ddv.datagrid('appendRow',{});
		    $('#verify_details').datagrid('fixDetailRowHeight',detailIndex);	// 添加后要重新調整高度 necessary
		    editIndex = ddv.datagrid('getRows').length-1;
		    ddv.datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
	    }
    }

8、兩個onClickRow

一、主datagrid中的onClickRow:這里要終止2個編輯,一個是datagrid中頭記錄的編輯,這個無校驗,簡單的通過datagrid的endedit就可以了。另外一個是subGrid的記錄的編輯,這個通過endEditing()。都搞定了之后,開始編輯click的主datagrid中的頭記錄

   			onClickRow: function(index){
   				if(endEditing()){// 若有編輯行,先終止
	   				// 若是沒展開的話,那么其實datagrid還沒初始化,只是一個table而已
					$(this).datagrid('endEdit', detailIndex);	// 終止外層編幾行
	   				$(this).datagrid('selectRow', index).datagrid('beginEdit', index);
	   				detailIndex = index;
   				}else{
   					$(this).datagrid('selectRow', detailIndex);
   				}
   			}

二、subGrid的onClickRow:先endEditing(),通過之后,開始編輯選中的subGrid中的記錄,將該subGrid的頭記錄選中

	                 onClickRow: function(index){
	                 	var cdetailIndex = $(this).attr('id').substring("consume_table".length);	// 當前點擊的datagrid
	                 	// 若點擊的不是當前row
				        if (cdetailIndex != detailIndex  || editIndex != index){
				            if (endEditing()){
				                $('#consume_table' + cdetailIndex).datagrid('selectRow',index).datagrid('beginEdit',index);
				                $('#verify_details').datagrid('endEdit',detailIndex); // 終止外層編幾行
				                editIndex = index;
				                detailIndex = cdetailIndex;
				                $('#verify_details').datagrid('selectRow',detailIndex);
				            }else{
				            	$('#consume_table' + detailIndex).datagrid('selectRow', editIndex);
				            	$('#consume_table' + cdetailIndex).datagrid('unselectRow', index);
				            }
				        }
	                 }



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com