easyUI之dialog控件和form控件的使用

目录

一，dialog（对话框窗口）控件的使用 

在userManage.jap中添加如下代码

为修改添加点击事件：

同时在book.js中写如下方法，实现当点击修改时弹出对话框窗口

二，form（表单）控件的使用

在dialog（对话框窗口）中添加form表单

给dialog窗口绑定提交按钮

回显数据：从页面获取数据放到当前窗体

1.datagrid控件获取对应行数据row,

2.对应的行数据row填写到form控件

提交：submitForm

关闭窗体

刷新数据表格

---

在book.js中增加一列来放操作，在操作列的每一行放入单元格放修改的a标签

代码如下：

{
            field : '操作',
            title : '操作',
            width : 100,
            align : 'right',
            formatter : function(value, row, index) {
                return '<a href="javascript:void(0);">修改<a>'
            }

 效果如下：

一，dialog（对话框窗口）控件的使用 

在userManage.jap中添加如下代码

<div id="dd" class="easyui-dialog" title="编辑窗体"
        style="width: 500px; height: 200px;"
        data-options="iconCls:'icon-save',resizable:true,closed:true,closed:true,buttons:'#bb'">
    dialog content</div>

为修改添加点击事件：

"οnclick="edit();"

当点击人员信息维护时对话框窗口会自动弹出，因此添加closed属性为true，默认为关闭

closed：定义是否可以关闭的窗口

同时在book.js中写如下方法，实现当点击修改时弹出对话框窗口

function edit(){
//    dialog对话框窗口的方法扩展自window窗口
//    $("#win").window("open");
//    联想到$("#dd").dialog("open");
    $("#dd").dialog("open");
}

二，form（表单）控件的使用

在dialog（对话框窗口）中添加form表单

 <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>

给dialog窗口绑定提交按钮

<div style="text-align: center; padding: 5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton"
                οnclick="submitForm()" style="width: 80px">Submit</a> <a
                href="javascript:void(0)" class="easyui-linkbutton"
                οnclick="clearForm()" style="width: 80px">Clear</a>
        </div>

效果如下：

 

回显数据：从页面获取数据放到当前窗体

 将选中的数据表格对应数据填到表单中

1.datagrid控件获取对应行数据row,

调用datagrid中getSelected方法：返回第一个被选中的行或没有选中的行则返回null

    var row = $('#dg').datagrid("getSelected");

2.对应的行数据row填写到form控件

调用load方法将数据填充到表单中：

    $('#ff').form('load',row)

 效果如下：

 注意：数据回显jsp界面form表单的name属性名称必须与js中对应，否则回显不成功

提交：submitForm

function submitForm() {
    $('#ff').form('submit', {
        url : $('#ctx').val() + '/book.action?methodName=edit',
        success : function(data) {
            if (data== 1) {
//                关闭窗体
                $("#dd").dialog("close");
//                刷新数据表格
                $("#dg").datagrid("reload");
            }
        }
    });
}

关闭窗体

$("#dd").dialog("close");

刷新数据表格

$("#dg").datagrid("reload");

BookDao

public void edit(Book book) throws Exception {
        super.executeUpdate("update t_mvc_book set bname=?,price=? where bid=?", book,
                new String[] { "bname", "price", "bid" });
    }

BookAction

public String edit(HttpServletRequest req, HttpServletResponse resp) throws Exception {
        bookDao.edit(book);
        ResponseUtil.writeJson(resp, 1);
        return null;
    }

测试是否修改成功，成功则返回1：ResponseUtil.writeJson(resp, 1);