Easy UI實現行內編輯

最近跟著勇霞師姐做我們高校雲平台的ui系統，各個系統介面的管理。ui的系統雖然很小，但是技術內容很新鮮，這篇博文就像大家介紹一下我新接觸的easyui的知識：開啟行內編輯。

效果圖如下：

一、view頁面

首先，引入easyui的js檔案。

其次，是對工具欄和表單的設定。

儲存刪除

實體名稱

實體描述

屬性名稱

屬性描述

是否顯查詢條件

顯示順序

控制項型別

控制項htmlname

控制項htmlid

然後，就是編寫js事件了。

var editindex = undefined;//定義編輯列的索引
function endediting() 
if ($('#dg').datagrid('validaterow', editindex)) else 
}單擊單元格的時候觸發
function onclickcell(index, field) );
editindex = index;
}}根據型別選擇條件進行查詢
function dosearch() );
}// 根據型別選擇條件進行查詢
function entitysearch(entityid) );
}向後台提交資料，包括新增和修改
function onafteredit(index, row，value) 
else , 
success: function (data) }}
);}}新增按鈕，同時怎加隱藏的guid列
if (endediting()) 
}刪除事件
function remove() 
$('#dg').datagrid('canceledit', editindex)
.datagrid('deleterow', editindex);
editindex = undefined;
}function accept()

在這裡，我們需要注意的是新增和修改後的儲存事件，他們響應的是同乙個js方法，那就是onafteredit，那麼在向controller提交的時候就會出現問題，如何根據讓兩個不同的後台方法響應同乙個事件呢？請看controller的**。

二、controller頁面

首先，先看修改後更新的方法。

public boolean updatequeryproperty(string enqueryproperties)
return true;
}catch (exception e)
}else 
}

從上面更新的方法可以看出，updatequeryproperty接收的是編輯行整行的資料，我們區分是編輯單元格還是編輯新新增的一行可以通過判斷該編輯行的主鍵列是否為空值來得到結論，如果主鍵是空值，那個編輯行一定是新新增的一列，如果主鍵有值，那就就是在原來的單元格上的修改操作。下面是新增的操作：

public bool addentity(querypropertiesviewmodel queryviewmodel)
}catch (exception e)
return addidsuccess;
}

至此，便完美收工了。

總結：對行內編輯的easyui一直很感興趣，這次終於是接觸到了，很開心；但是中間的新增和修改兩個事件著實困惑了我好幾天的時間，剛開始是理不清思路，因為我們的**是從師姐那裡拷過來的，就順著她的思路往下走，把自己給繞了進去。後來還是打算自己從頭把這裡塊知識理清楚，找來了行內編輯的easyui的demo，用firebug一步一步的除錯，然後再某個即將入眠的晚上，終於茅塞頓開了。這還是說明那個問題，程式設計思路真的很重要，有了清晰的邏輯思路，你的工作就完成90%了。

Easy UI實現行內編輯

easyui中datagrid行內編輯自動計算

行內編輯時間框

JTable 實現行標題

Easy UI實現行內編輯

easyui中datagrid行內編輯自動計算

行內編輯時間框

JTable 實現行標題

相關推薦