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

川长思鸟来 2022-06-12 13:59 200阅读 0赞

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

**1，创建easyUI Dialog**

**，我们需要一个点击事件**

**    <a οnclick="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 οnclick="toAdd();" type="button" id="dept\_button" value="提交 "/>  
         </center>  
        </form>  
    </div>**

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

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

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

**<a οnclick="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页面有：**

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