Easyui之datagrid修改

目标：使用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修改的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。