Jquery对话框未打开 [英] Jquery dialog is not opening

问题描述

 @ * @@ model GridImplementation.Models.EmployeeDetailsModel * @ 
 @model IEnumerable< GridImplementation.Models.EmployeeDetailsModel> 
 @ Styles.Render（〜/ Content / css）
< link href =〜/ Content / themes / base / jquery-ui.css =stylesheet/> 
 @ Styles.Render（〜/ Content / themes / base / css）
 @ Scripts.Render（〜/ bundles / jquery）
 @ Scripts.Render（〜/ bundles / jqueryui）
< style type =text / css> 
 .alignment {
 text-align：center; 
} 
 
 .hAlignment {
 margin-left：10px; 
 float：left; 
} 
 
 table，th，td {
 border：1px solid black; 
 font-size：1.1em; 
 text-align：center; 
} 
 
 table {
 border-collapse：separate; 
宽度：90％; 
} 
 
 td {
 padding：10px 0; 
} 
 
 tr：nth-​​child（偶数）{
背景：#CCC; 
} 
 
 tr：nth-​​child（单数）{
背景：#FFF; 
} 
 
 table th {
 background-color：ButtonShadow; 
} 
< / style> 
< div> 
< table id =tEmpDetails> 
< thead> 
< tr> 
< th>员工姓名< / th>   
< th>员工指定< / th>   
< th>员工部< / th>   
< th>员工薪资< / th>   
< th>操作< / th>   
< / tr> 
< / thead> 
< tbody> 
 @foreach（模型中的var EmployeeDetails）
 {
< tr> 
< td class =alignmentstyle =display：none;> @ EmployeeDetails.EmpID< / td>   
< td class =alignment> @ EmployeeDetails.EmpName< / td>   
< td class =alignment> @ EmployeeDetails.EmpDesignation< / td>   
< td class =alignment> @ EmployeeDetails.EmpDepartment< / td>   
< td class =alignment> @ EmployeeDetails.EmpSalary< / td>   
< td class =alignment> 
< input id =btnEdittype =buttonvalue =编辑/> 
< input id =btnDeletetype =buttonvalue =删除/> 
< / td> 
< / tr> 
} 
< / tbody> 
< / table> 
< / div> 
 
< script type =text / javascript> 
 $（document）.ready（function（）{
 $（＃tEmpDetails）。on（'click'，'＃btnEdit'，function（）{
 var CurrentRow = $ （this）.closest（'tr'）; 
 var EmpID = CurrentRow.find（td：eq（0））。text（）; 
 var EmpName = CurrentRow.find（td： eq（1））。text（）; 
 var EmpDesignation = CurrentRow.find（td：eq（2））。text（）; 
 var EmpDepartment = CurrentRow.find（td： eq（3））。text（）; 
 var EmpSalary = CurrentRow.find（td：eq（4））。text（）; 
 $（＃EmpName）。val（ EmpName）; 
 $（＃EmpDesignation）。val（EmpDesignation）; 
 $（＃EmpDepartment）。val（EmpDepartment）; 
 $（＃EmpSalary）。val （EmpSalary）; 
 $（＃openPopup）。dialog（'open'）; 
 
 
}）; 
}）; 
 $（function（）{
 $（＃openPopup）。dialog（{
 modal：true，
 autoOpen：false，
 title：编辑员工详细信息，
宽度：500，
高度：500，
按钮：{
关闭：function（）{
 $（this）.dialog（'close' ）; 
} 
} 
}）; 
}）
 
< / script> 
 
< div id =openPopUpstyle =display：none;对齐=中心]，[ 
< table> 
< tr> 
< td>员工姓名：< / td> 
< td> @ Html.TextBox（EmpName）< / td> 
< / tr> 
< tr> 
< td>员工指定：< / td> 
< td> @ Html.TextBox（EmpDesignation）< / td> 
< / tr> 
< tr> 
< td>员工部门：< / td> 
< td> @ Html.TextBox（EmpDepartment）< / td> 
< / tr> 
< tr> 
< td>员工薪水：< / td> 
< td> @ Html.TextBox（EmpSalary）< / td> 
< / tr> 
< / table> 
< / div> 

我的尝试：



添加了相关的jquery库和css

解决方案

< blockquote>（document）.ready（function（）{

（＃tEmpDetails）。on（'click'，'＃btnEdit'，function（）{
var CurrentRow =

（this）.closest（'tr'）;
var EmpID = CurrentRow.find（td：eq（0））。text（）;
var EmpName = CurrentRow.find（td：eq（1））。text（）;
var EmpDesignation = CurrentRow.find（td：eq（2））。text（）;
var EmpDepartment = CurrentRow.find（td：eq（3））。text（）;
var EmpSalary = CurrentRow.find（td：eq（4））。text（）;

@*@@model GridImplementation.Models.EmployeeDetailsModel*@
@model IEnumerable<GridImplementation.Models.EmployeeDetailsModel>
@Styles.Render("~/Content/css")
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
<style type="text/css">
    .alignment {
        text-align: center;
    }

    .hAlignment {
        margin-left: 10px;
        float: left;
    }

    table, th, td {
        border: 1px solid black;
        font-size: 1.1em;
        text-align: center;
    }

    table {
        border-collapse: separate;
        width: 90%;
    }

    td {
        padding: 10px 0;
    }

    tr:nth-child(even) {
        background: #CCC;
    }

    tr:nth-child(odd) {
        background: #FFF;
    }

    table th {
        background-color: ButtonShadow;
    }
</style>
<div>
    <table id="tEmpDetails">
        <thead>
            <tr>
                <th>Employee Name</th>  
                <th>Employee Designation</th>  
                <th>Employee Department</th>  
                <th>Employee Salary</th>  
                <th>Actions</th>  
            </tr>
        </thead>
        <tbody>
            @foreach (var EmployeeDetails in Model)
            {
                <tr>
                    <td class="alignment" style="display:none;">@EmployeeDetails.EmpID    </td>  
                    <td class="alignment">@EmployeeDetails.EmpName    </td>  
                    <td class="alignment">@EmployeeDetails.EmpDesignation    </td>  
                    <td class="alignment">@EmployeeDetails.EmpDepartment    </td>  
                    <td class="alignment">@EmployeeDetails.EmpSalary    </td>  
                    <td class="alignment">
                        <input id="btnEdit" type="button" value="Edit" />
                        <input id="btnDelete" type="button" value="Delete" />
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

<script type="text/javascript">
    $(document).ready(function () {       
        $("#tEmpDetails").on('click', '#btnEdit', function () {
            var CurrentRow = $(this).closest('tr');
            var EmpID = CurrentRow.find("td:eq(0)").text();
            var EmpName = CurrentRow.find("td:eq(1)").text();
            var EmpDesignation = CurrentRow.find("td:eq(2)").text();
            var EmpDepartment = CurrentRow.find("td:eq(3)").text();
            var EmpSalary = CurrentRow.find("td:eq(4)").text();
            $("#EmpName").val(EmpName);
            $("#EmpDesignation").val(EmpDesignation);
            $("#EmpDepartment").val(EmpDepartment);
            $("#EmpSalary").val(EmpSalary);
            $("#openPopup").dialog('open');


        });
    });
    $(function () {
        $("#openPopup").dialog({
            modal: true,
            autoOpen: false,
            title: "Edit Employee Details",
            width: 500,
            height: 500,
            buttons: {
                close: function () {
                    $(this).dialog('close');
                }
            }
        });
    })

</script>

<div id="openPopUp" style="display:none;" align=center>
    <table>
        <tr>
            <td>Employee Name:</td>
            <td>@Html.TextBox("EmpName")    </td>
        </tr>
        <tr>
            <td>Employee Designation:</td>
            <td>@Html.TextBox("EmpDesignation")    </td>
        </tr>
        <tr>
            <td>Employee Department:</td>
            <td>@Html.TextBox("EmpDepartment")    </td>
        </tr>
        <tr>
            <td>Employee Salary:</td>
            <td>@Html.TextBox("EmpSalary")    </td>
        </tr>
    </table>
</div>

What I have tried:

Added related jquery libraries and css

解决方案

(document).ready(function () {

("#tEmpDetails").on('click', '#btnEdit', function () { var CurrentRow =

(this).closest('tr'); var EmpID = CurrentRow.find("td:eq(0)").text(); var EmpName = CurrentRow.find("td:eq(1)").text(); var EmpDesignation = CurrentRow.find("td:eq(2)").text(); var EmpDepartment = CurrentRow.find("td:eq(3)").text(); var EmpSalary = CurrentRow.find("td:eq(4)").text();

这篇关于Jquery对话框未打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！