目標：使用datagrid進行數據的修改

第一步：查看easyui的API，找到formatter,然后粘貼到所用到的js代碼中

第二步：然后在js代碼中把剛剛粘貼的代碼改成需要的樣子?

結果展示：

第三步：再到API中找到dialog然后拷到所用的頁面中?

用法有兩個（我們這使用第一個）

但這默認是打開的要把它改為默認不打開

?

只需把modal里的true改為false就可以了

或者找到closed屬性添加進去就行了

第四步：給修改加一個點擊事件，讓點擊修改時彈出一個窗口?

?

第五步：加入form表單控件?

?在api里找到form表單控件的方法，然后粘貼到jsp頁面

結果展示：

第六步：找到api里的button控件?

?粘貼到jsp頁面里面

或者直接用下面代碼覆蓋

<div id="dd" class="easyui-dialog" title="編輯窗體"style="width: 500px; height: 200px;"data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'"><!-- 提交的from表單 --><form id="ff" action="" method="post"><div style="margin-bottom:20px"><input class="easyui-textbox" name="bname" style="width:100%" data-options="label:'書名:',required:true"></div><div style="margin-bottom:20px"><input class="easyui-textbox" name="price" style="width:100%"data-options="label:'價格:',required:true"></div><input type="hidden" id="book_id" name="bid" value=""></form><div style="text-align:center;padding:5px 0"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a></div></div>

結果展示：

?

第七步：數據回顯到窗口上

只需用rows獲取數據不需要訪問數據庫

結果展示：

?

注意：凡是要進行數據回顯，一定要和form表單中的name屬性對應上?

第八步：點擊提交修改數據?

在api中找到submit

?然后寫一個提交的方法

再寫dao方法和子控制器

這個時候能修改但是不能自動關閉窗口

第八步：在子控制器調用方法返回值

如果為1則修改成功然后關閉窗口

?

到這就可以了！！?

拜拜各位！！！?

?

總結

以上是生活随笔為你收集整理的Easyui之datagrid修改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。