目标:使用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则修改成功然后关闭窗口
到这就可以了!!
拜拜各位!!!