EasyUI效果 DataGrid的編輯效果

var editindex = undefined;
function endediting()
if ($('#dg').datagrid('validaterow', editindex)));
var productname = $(ed.target).combobox('gettext');
$('#dg').datagrid('getrows')[editindex]['productname'] = productname;
$('#dg').datagrid('endedit', editindex);
editindex = undefined;
return true;
} else 
} function onclickrow(index) else 
} }

然後是我的**,先是html**,效果是上圖一樣,只是欄位和名字不同.

查詢規則id 規則型別優先順序起始位置長度原長度效果是否啟用刪除上移下移儲存撤銷儲存優先順序

主要是這樣的,首先規則和型別列都是下拉框列,優先順序列不議不可編輯;起始位置,長度和原長度的編輯器都是可編輯的數字框,效果是文字框,而是否啟用顯示的是中文"啟用","停用".而按鈕,除了正常的新增,刪除,儲存和撤銷,還有上移和下移,以及儲存優先順序,這三個按鈕是用來處理優先順序的.

if (endediting()) );

editindex = $('#dg').datagrid('getrows').length - 1;

$('#dg').datagrid('selectrow', editindex).datagrid('beginedit',

editindex); }}

移除一行,先選中一行,然後取消對該行的編輯,然後刪了該行,並將編輯索引清了.

function removeit() 
$('#dg').datagrid('canceledit', editindex).datagrid('deleterow',
editindex);
editindex = undefined;
}

撤銷修改,則將所有沒有儲存的資料,進行還原.

function reject()

而提交資料,將之前修改的結果進行持久化儲存.還是先結束之前的編輯,然後獲取到所有修改,新增,刪除和修改的.將所有修改中的isvalid的啟用改為true,因為後台該字段為boolean型別.並將所有的新增,刪除和修改的結果都用json.stringify處理,將資料通過contoller處理,最後用acceptchanges提交所有修改.

function accept() else  
}) 
effectrow["inserted"] = json.stringify(inserted); 
} if (deleted.length) else 
}) 
effectrow["deleted"] = json.stringify(deleted); 
} if (updated.length) else 
}) 
effectrow["updated"] = json.stringify(updated); 
} $.post("$/add", effectrow, function(rsp) 
}, "json").error(function() );
}else else 
}) 
$.post("$/add", function(rsp) 
}, "json").error(function() );}}
} }

而對於優先順序的修改,是這樣處理的.上移和下移按鈕分別執行moveup和movedown方法,獲取到當前選中行,以及該行的索引,執行mysort方法,傳入當前行的索引,以及'up'指令,以及對應的datagrid名.同理movedown一樣,只是指令為'down'.

//上移
function moveup() 
//下移
function movedown()

而mysort方法,是這樣處理的,若為up,則根據傳入的index和datagrid的名字獲取到本行以及上一行的資料,將本行和上一行的資料進行交換,並且重新整理,然後還是選中之前的行.而優先順序的值,是和行號保持一致的.down同理.

function mysort(index, type, gridname) 
} else if ("down" == type) 
}}

而儲存就是將所有的資料都獲取到,進行儲存.

後台contoller中如何處理資料?將資料傳到後台後,從request獲取到值,用jsonuntils的fromjson方法將資料從json轉為實體list.然後更新實體list.

/**
* 新增規則
logger.info("controller執行完成新增規則的方法");
}

以上就是我做的datagrid編輯效果,主要了解原理,以及做了乙個優先順序的修改.到目前為止,我使用的easyui效果就介紹完了.

EasyUI效果 DataGrid的編輯效果

EasyUI效果彈出頁面效果

EasyUI介面載入等待效果

Silverlight控制項DataGrid用法總結

EasyUI效果 DataGrid的編輯效果

EasyUI效果 彈出頁面效果

EasyUI介面載入等待效果

Silverlight控制項DataGrid用法總結

相關推薦

EasyUI效果彈出頁面效果