关于easyUI Dialog的创建以及Dialog如何获取选中DataGrid中的值

首先，我们需要导相应的easyUI包和CSS，这里就不必多说了

1，创建easyUI Dialog

，我们需要一个点击事件

    <a onclick="add_dept();" class="easyui-linkbutton" iconCls="icon-add" plain="true" title="添加部门"></a>

点击之后触发add_dept()函数

具体函数如下

js代码：

 function add_dept () {
                $("#dialog").show();//必须先显示，再弹出
                $("#dialog").dialog({
                    title: "添加",
                    modal:true,//遮幕
                    width: 400,
                    height: 200
                });
            }

然后在html页面有：

<div id="dialog" style="display: none;">
 <div class="opy">
 <div class="headnote login_ts" style="display: block;" id="error_tips"></div>
  </div>
     <form id="dept_form" action="">
     <center>
           昵称：  
           <input type="text" id="nick_name" /><br />
          性别：
        <input type="text" id="user_sex" /><br />
          部门：
        <input type="text" id="dept_name" /><br />
          电话：
        <input type="text" id="user_phone" /><br />
          邮箱：
        <input type="text" id="user_email" /><br />
        
         <input onclick="toAdd();" type="button" id="dept_button" value="提交 "/>
         </center>
        </form>
    </div>

就是那么简单，就这样就完成弹出easyUI Dialog的表单了

2，Dialog如何获取选中DataGrid中的值

首先，还是需要一个触发事件

<a onclick="edit_dept();" class="easyui-linkbutton" iconCls="icon-edit" plain="true" title="编辑部门"></a>   

然后js代码如下：

 function edit_dept(){
               var row = $('#dg').datagrid('getSelected');//获取当前行
            
               if (row!=null){
                   
                   $("#dialog").show();//必须先显示，再弹出
                   $("#dialog").dialog({
                       title: "修改",
                       modal:true,
                       width: 400,
                       height: 200
                   });                
                   //读取方式,根据row的字段row.xxx
                   $("#nick_name").val(row.nick_name);
                   $("#user_sex").val(row.user_sex);
                   $("#dept_name").val(row.dept_name);
                   $("#user_phone").val(row.user_phone);
                   $("#user_email").val(row.user_email);
                   
            
               }else{ alert("请选中数据");}
            
               }

然后在html页面有：

<div id="dialog" style="display: none;">
 <div class="opy">
 <div class="headnote login_ts" style="display: block;" id="error_tips"></div>
  </div>
     <form id="dept_form" action="">
     <center>
           昵称：  
           <input type="text" id="nick_name" /><br />
          性别：
        <input type="text" id="user_sex" /><br />
          部门：
        <input type="text" id="dept_name" /><br />
          电话：
        <input type="text" id="user_phone" /><br />
          邮箱：
        <input type="text" id="user_email" /><br />
        
         <input onclick="toAdd();" type="button" id="dept_button" value="提交 "/>
         </center>
        </form>
    </div>

就是那么简单，就这样就完成弹出easyUI Dialog获取选中DataGrid中的值的表单了。