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则修改成功然后关闭窗口

 

到这就可以了！！ 

拜拜各位！！！