今天工作用到了easyui行編輯，在這裏總結一下，不會的同學可以看看，順便吐槽一下，網上的很多博客都是粘貼複製的，內容很亂 ，而且看不懂，不知道這些粘貼複製的懷的是什麼心，不但沒用，還影響別人搜索。
呼籲大家在寫博客的時候認真一些，別隻粘貼複製，至少可以自己運行好了貼上自己的代碼和一點感想，對別人用處很大的。
好了，正題開始——>
我用的是easyui 1.4
效果如下：
點擊添加按鈕，在第二行的位置添加新行，點擊單元格輸入內容，點保存通過ajax提交。
修改則直接點擊單元格修改，點保存提交。
代碼如下：
首先table還是平常的table，只不過要在需要編輯的列加上editor:'text' 我這裏只是編輯文本，所以是text，其他時間等類型請查api,
另外因爲我觸發修改的方式是直接點擊單元格，所以table要加上onClickCell屬性，然後重寫onClickCell方法。
$("#remark_dg").datagrid({
url:'',
columns:[[
{field:'cb',checkbox:true,align:'center'},
{field:'id',title:'編號',width:80,hidden:true},
{field:'text',title:'內容',width:80,editor:'text'}
]],
toolbar:'#remark_tb', //表格菜單
fit:true,
fitColumns:true,
loadMsg:'加載中...', //加載提示
rownumbers:true, //顯示行號列
singleSelect:true,//是允許選擇一行
onClickCell: onClickCell,
queryParams:{ //在請求數據是發送的額外參數，如果沒有則不用寫
},
onLoadSuccess:function(data){
},
rowStyler:function(index,row){
}
});簡單說明下可編輯的實現方法：
首先通過beginEdit讓選中的行啓動編輯，保存的時候，獲得選中的行，通過row取到編輯的信息，使用ajax提交，提交完成，使用endEdit屬性結束行編輯。
//可編輯行
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#remark_dg').datagrid('validateRow', editIndex)){
$('#remark_dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickCell(index, field){
if (editIndex != index){
if (endEditing()){
$('#remark_dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
var ed = $('#remark_dg').datagrid('getEditor', {index:index,field:field});
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
editIndex = index;
} else {
$('#remark_dg').datagrid('selectRow', editIndex);
}
}
}
function accept(){
if (endEditing()){
var row = $('#remark_dg').datagrid('getSelected');
var text = row.text;
var remarkid = row.id;
var typeid = $("#typeid").val();
$.ajax({
url:"${ctx}/typeRemark/addTypeRemark.do",
type:"post",
dataType:"json",
data:{
remarkid:remarkid,
text:text,
typeid:typeid
},
success:function(data){
if(data.status == "success"){
$.messager.show({
title : '提示',
msg : '操作成功'
});
$('#dg').datagrid('load', {});
}else{
$.messager.show({
title : '提示',
msg : '操作失敗，請聯繫管理員 ------'
});
}
},
error:function(){
$.messager.show({
title : '提示',
msg : '系統錯誤，請聯繫管理員------'
});
}
});
}
}
function addRemark(){
function addRemark(){
if (editIndex != undefined){
return ;
}
$('#remark_dg').datagrid('insertRow',{
index: 1, // 索引從0開始
row: {
text:''
}
});
$('#remark_dg').datagrid('selectRow', 1);
$('#remark_dg').datagrid('beginEdit', 1);
var ed = $('#remark_dg').datagrid('getEditor', {index:1,field:'text'});
$(ed.target).focus();
editIndex = 1;
}
}這裏有必要提一下，我的添加和修改方法用了一個方法accpet(),同時後臺也用一個方法處理的，有需要的可以借鑑一下：
表現層用的是spring mvc，持久成用的hibernate:
@RequestMapping(value = "/addTypeRemark.do",method = RequestMethod.POST)
@ResponseBody
public Map<String,String> addTypeRemark(String text,String typeid,@RequestParam(value = "remarkid", required = false)Integer remarkid,HttpServletRequest request){
Map<String,String> map = new HashMap<String,String> ();
System.out.println(typeid);
try {
BatchType batchType=batchTypeMag.find(Integer.parseInt(typeid));
TypeRemark typeRemark = new TypeRemark();
if(remarkid!=null){
typeRemark = typeRemarkMag.find(remarkid);
}
typeRemark.setBatchType(batchType);
typeRemark.setText(text);
typeRemarkMag.saveOrUpdate(typeRemark);
map.put("status","success");
} catch (Exception e) {
e.printStackTrace();
map.put("status","fail");
}
return map;
}也就是說，添加的時候，沒有這條記錄的id,修改的時候需要通過記錄的id修改，所以可以判斷一下。
這樣，easyui動態編輯行就完成啦
========================================================================================================
上次寫的這個行編輯還是有點問題的，就是沒有驗證，而且添加的時候沒有獲取到焦點。所以這裏修改一下：
1.editor類型改爲textbox,因爲text不支持easyui的驗證
columns:[[
{field:'id',title:'編號',width:80,hidden:true},
{field:'text',title:'內容',width:80,editor:{
type:'textbox',
options:{
required:true,
validType:'length[0,30]',
invalidMessage:'不能超過30個字!'
}
}}
]],2.添加獲取焦點：
function addRemark(){
if (editIndex != undefined){
return ;
}
$('#remark_dg').datagrid('insertRow',{
index: 0, // 索引從0開始
row: {
text:''
}
});
$('#remark_dg').datagrid('selectRow', 0);
$('#remark_dg').datagrid('beginEdit', 0);
var ed = $('#remark_dg').datagrid('getEditor', {index:0,field:'text'});
$(ed.target).textbox('textbox').focus();
editIndex = 0;
}3.添加撤銷操作：
function reject(){
$('#remark_dg').datagrid('rejectChanges');
editIndex = undefined;
}<a href="javascript:reject()" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" >取消</a>
