文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >jtable不触发在自定义操作按钮上进行的点击

问jtable不触发在自定义操作按钮上进行的点击
EN

Stack Overflow用户
提问于 2018-02-27 16:04:49
回答 2查看 114关注 0票数 0

我的站点是用ASP.NET MVC3.0编写的代码。

对于库: jQuery 3.0.0，jQuery Validation 1.17.0 (我不确定还有哪些库是有用的)。

当在Internet Explorer11中测试时，当用户使用jTable.org按下一个创建为“自定义操作”的按钮时，我的问题就发生了。此测试在Windows 2012 Server中进行。

在同一服务器上的火狐上测试的同一站点工作正常，没有出现这个或任何其他问题。

在IE中，由jTable创建的用于创建、编辑和删除操作的常规按钮正在工作。

以下是该视图的代码：

代码语言：javascript
复制
@model SuperSBL2.WebMVC3.ViewModels.HTEList
           
@{
    ViewBag.Title = "Administrar HTEs";
}

@section CssImport{
    <style>
        div.filtering
        {
            border: 1px solid #999;
            margin-bottom: 5px;
            padding: 10px;
            background-color: #EEE;
        }
    </style>
}


<h2>Administrar HTEs</h2>


<div class="filtering">
    <form>
        <label>Línea de Producción: <input type="text" name="ProductionLineName" id="ProductionLineName" /></label>
        <label>Area: <input type="text" name="AreaName" id="AreaName" /></label>
        <label>Operación: <input type="text" name="OperationName" id="OperationName" /></label>
        <br /><label>Modelo: <input type="text" name="ModelName" id="ModelName" /></label>
        <label>Tipo (ensameble/subensamble): <input type="text" name="HTETypeName" id="HTETypeName" /></label>
        <button type="submit" id="LoadRecordsButton" class="btn btn-primary">Buscar registros</button>
    </form>
</div>


<div id="HTEContainer" style="width: 1200px; "></div>

<br />

<button type="submit" id="GoBack" class="btn btn-default">REGRESAR</button>

<script type="text/javascript">

    $(document).ready(function () {

        //Localization texts
        var spanishMessages = {
            serverCommunicationError: 'Error de comunicación con el servidor, no puedo conectarme a la API.',
            loadingMessage: 'Obteniendo datos...',
            noDataAvailable: 'No hay datos disponibles!',
            addNewRecord: 'Nuevo HTE',
            editRecord: 'Editar HTE',
            areYouSure: 'Estás seguro?',
            deleteConfirmation: 'Estás a punto de borrar éste registro. Por favor confirma.',
            save: 'Guardar HTE',
            saving: 'Grabando',
            cancel: 'Cancelar',
            deleteText: 'Borrar HTE',
            deleting: 'Borrando',
            error: 'Error',
            close: 'Cerrar',
            cannotLoadOptionsFor: 'No puedo cargar opciones para campo {0}',
            pagingInfo: 'Mostrando {0} a {1} de {2} registros',
            pageSizeChangeLabel: 'Registros',
            gotoPageLabel: 'Ir a página',
            canNotDeletedRecords: 'No puedo borrar {0} de {1} registros!',
            deleteProggress: 'Borrado {0} de {1} registros, procesando...'
        };

        $('#HTEContainer').jtable({
            messages: spanishMessages, //Localizacion
            title: 'Lista de HTEs',
            paging: true,
            pageSize: 10,
            sorting: true,
            defaultSorting: 'AreaName ASC',
            selecting: true,
            actions: {
                listAction: '@Url.Action("HTEListForGrid")',
                deleteAction: '@Url.Action("DeleteHTE")',
                updateAction: '@Url.Action("UpdateHTE")',
                createAction: '@Url.Action("CreateHTE")'
            },
            fields: {
                HTEHeaderId: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },

                HTETypeID: {
                    title: 'Tipo',
                    list: true,
                    edit: false,
                    create: true,
                    options: '@Url.Action("GetHTETypeOptions","HTE")'
                },

                LineID: {
                    title: 'Línea de Producción',
                    //width: '35%',
                    list: true,
                    options: '@Url.Action("GetProductionLinesOptions","MasterData")'
                },

                AreaId: {
                    title: 'Area',
                    dependsOn: 'LineID', // jTable builds cascade dropdowns!
                    //width: '35%',
                    list: true,
                    options: function (data) {
                        if (data.source == 'list') {
                            //Return url of all countries for optimization. 
                            //This method is called for each row on the table and jTable caches options based on this url.
                            return '/MasterData/GetAreasOptionsByProductionLineID?productionLineId=0';
                        }

                        //This code runs when user opens edit/create form or changes continental combobox on an edit/create form.
                        //data.source == 'edit' || data.source == 'create'
                        return '/MasterData/GetAreasOptionsByProductionLineID?productionLineId=' + data.dependedValues.LineID;
                    }
                },

                OperationID: {
                    title: 'Operación',
                    dependsOn: 'AreaId', // jTable builds cascade dropdowns!
                    //width: '35%',
                    list: true,
                    options: function (data) {
                        if (data.source == 'list') {
                            //Return url of all countries for optimization. 
                            //This method is called for each row on the table and jTable caches options based on this url.
                            return '/MasterData/GetOperationOptionsByAreaID?areaId=0';
                        }

                        //This code runs when user opens edit/create form or changes continental combobox on an edit/create form.
                        //data.source == 'edit' || data.source == 'create'
                        return '/MasterData/GetOperationOptionsByAreaID?areaId=' + data.dependedValues.AreaId;
                    }
                },

                ModelID: {
                    title: 'Modelo',
                    dependsOn: 'LineID', // jTable builds cascade dropdowns!
                    //width: '35%',
                    list: true,
                    options: function (data) {
                        if (data.source == 'list') {
                            //Return url of all countries for optimization. 
                            //This method is called for each row on the table and jTable caches options based on this url.
                            return '/MasterData/GetModelOptionsByProductionLine?productionLineId=0';
                        }

                        //This code runs when user opens edit/create form or changes continental combobox on an edit/create form.
                        //data.source == 'edit' || data.source == 'create'
                        return '/MasterData/GetModelOptionsByProductionLine?productionLineId=' + data.dependedValues.LineID;
                    }
                },


                OperationAvailableTime: {
                    title: 'Tiempo disponible',
                    //width: '35%',
                    list: true,
                    edit: false,
                    create: false
                } ,

                Effiency: {
                    title: 'Effciencia',
                    //width: '35%',
                    list: true
                } ,

                RevisionNumber: {
                    title: '# Revisión',
                    //width: '35%',
                    list: true,
                    edit: false,
                    create: false,
                    defaultValue: '0'
                },

                RevisionDate: {
                    title: 'Fecha Revisión',
                    //width: '15%',
                    type: 'date',
                    list: true,
                    edit: false,
                    create: false,
                    displayFormat: 'yy-mm-dd'
                },

                ProductionRate: {
                    title: 'Producción Diaria',
                    //width: '35%',
                    list: true
                },

                Taktime: {
                    title: 'Taktime',
                    //width: '35%',
                    list: true
                },

                RequiredHeadCount: {
                    title: 'Head Count',
                    //width: '35%',
                    list: true
                },


                HTEStatus: {
                    title: 'Status',
                    //width: '35%',
                    list: true,
                    edit: false,
                    create: false,
                    options: '@Url.Action("GetHTEStatusOptions","HTE")'
                },

                Active: {
                    title: 'Activo?',
                    //width: '12%',
                    type: 'checkbox',
                    list: true,
                    edit: false,
                    create: false,
                    values: { 'false': 'No Activo', 'true': 'Activo' },
                    defaultValue: 'true'
                },
                
                Overspeed: {
                    title: 'OverSpeed',
                    create: true,
                    edit: true,
                    list: true
                    //, defaultValue: @Html.Raw(Json.Encode(ViewBag.OverSpeed))
                },

                CustomActionAdmin: {
                    title: '',
                    //width: '1%',
                    sorting: false,
                    create: false,
                    edit: false,
                    list: true,
                    display: function (data) {
                        if (data.record) {
                            return '<button title="" id="btnAdmin"  class="jtable-command-button glyphicon glyphicon-cog" onclick="transferAdmin(' + data.record.HTEHeaderId + '); return false;"></button>';
                        }
                    }
                },
                
                CustomActionActivities: {
                    title: '',
                    //width: '1%',
                    sorting: false,
                    create: false,
                    edit: false,
                    list: true,
                    display: function (data) {
                        if (data.record) {
                            return '<button title="" id="btnAdmin"  class="jtable-command-button glyphicon glyphicon-wrench" onclick="transferHTEDetails(' + data.record.HTEHeaderId + '); return false;"></button>';
                        }
                    }
                }               
            }
        });

        //Re-load records when user click 'load records' button.
        $('#LoadRecordsButton').click(function (e) {
            e.preventDefault();
            $('#HTEContainer').jtable('load', {
                ProductionLineName: $('#ProductionLineName').val(),
                AreaName: $('#AreaName').val(),
                OperationName: $('#OperationName').val(),
                ModelName: $('#ModelName').val(),
                HTETypeName: $('#HTETypeName').val()
            });
        });

        //Load all records when page is first shown
        $('#LoadRecordsButton').click();


        $('#GoBack').click(function (e) {
            e.preventDefault();
            window.location.replace("/HTE");
        });

    });

    function transferAdmin(hteHeaderId) {
        window.location.replace("/HTE/AdminSettings/" + hteHeaderId);
    };

    function transferHTEDetails(hteHeaderId) {
        window.location.replace("/HTE/HTEActivitiesList/?HTEHeaderId=" + hteHeaderId);
    };

</script>
<br />


@section scripts {

}

现在，这是正在使用的_Layout.cshtml的代码：

代码语言：javascript
复制
<!DOCTYPE html>
@{
    var jTableStyle = "metro/blue/jtable.css";
    if (!string.IsNullOrEmpty(Request["jTableStyle"]))
    {
        jTableStyle = Request["jTableStyle"];
    }
}
<html lang="es-mx">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Super Sistema Balanceo de Líneas - @ViewBag.Title - </title>

    
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/metroblue/jquery-ui.css")" rel="stylesheet" type="text/css" />

    @*<link href="@Url.Content("~/Content/highlight.css")" rel="stylesheet" type="text/css" />*@
    <link href="@Url.Content("~/Scripts/jtable/themes/" + jTableStyle)" rel="stylesheet" type="text/css" />

    <link href="@Url.Content("~/Scripts/syntaxhighligher/styles/shCore.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Scripts/syntaxhighligher/styles/shThemeDefault.css")" rel="stylesheet" type="text/css" />


    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
    

    <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/core.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/datepicker.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/theme.css")" rel="stylesheet" type="text/css" />

    <link href="@Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" type="text/css" />



    @RenderSection("CssImport", false)



    
    <script src="@Url.Content("~/Scripts/jquery-3.0.0.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-migrate-3.0.0.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.12.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui.unobtrusive-3.0.0.min.js")" type="text/javascript"></script>
    
    <script src="@Url.Content("~/Scripts/jquery.validate.date.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    
@*    <script src="@Url.Content("~/Scripts/jquery.validate-vsdoc.js")" type="text/javascript"></script>*@

    <script src="@Url.Content("~/Scripts/modernizr-2.8.3.js")" type="text/javascript"></script>


    <script src="@Url.Content("~/Scripts/syntaxhighligher/shCore.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushJScript.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushXml.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushCSharp.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushSql.js")" type="text/javascript"></script>
    
    <script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/moment.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/respond.min.js")" type="text/javascript"></script>

    <script type="text/javascript" src="@Url.Content("~/Scripts/jtable/jquery.jtable.js")"></script>

    <script src="@Url.Content("~/Scripts/jtablesite.js")" type="text/javascript"></script>



</head>
<body>
    @Html.Partial("_NavBar")
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Super Sistema Balanceo de Líneas</p>
        </footer>
    </div>

    @RenderSection("scripts", required: false)
    @RenderSection("CustomScripts", required: false)
</body>



</html>

这是Internet Explorer中系统的图片，按预期显示：page displayed in Internet Explorer

你可以看到渲染效果和预期的一样，在Internet Explorer的这个区域没有问题。

  • 红色箭头表示创建为自定义操作的按钮，一旦按下，则不会发生任何事情。当显示IE开发人员工具时，我按下带有读取箭头的按钮，什么也没有发生:控制台中甚至没有错误，网络选项卡中也没有错误，什么都没有。这是error I'm having.
  • Green箭头表示由jTable创建的用于编辑、创建和删除操作的按钮作为网格的一部分。这些按钮工作得很好。这方面没有问题。请看这些图片：

我希望你们能提供任何想法。

谢谢，杰拉多。

javascript
jquery
jquery-jtable
EN

回答 2

Stack Overflow用户

发布于 2018-03-19 20:22:10

这是一个复杂的senario，所以我不能复制它。

我从您的代码中观察到，您正在通过javascript在button定义中添加单击处理程序。您是否尝试过通过jQuery应用单击处理程序

代码语言：javascript
复制
display: function (data) {
    var $but = '';
    if (data.record) {
        $but = $('<button title=""  class="jtable-command-button glyphicon glyphicon-cog" ></button>');
        $but.click(transferAdmin(data.record.HTEHeaderId));
    }
    return $but;
}

我还想指出，您的原始代码是在表的每一行上使用相同的id btnAdmin创建一个按钮，这既不是好的做法，也不是很有用，所以我省略了这一点，因为这可能是IE感到困惑的另一个原因。

票数 0
EN

Stack Overflow用户

发布于 2018-06-10 04:06:40

感谢@misterP的回复。在经历了一段糟糕的时光后，我设法理解了哪里出了问题，并修复了它。

让我试着解释一下我遇到的问题的修复。

1)主要问题是在IE中，我的jQuery逻辑不工作，而在火狐和Chrome中工作。我不知道IE兼容性模式是在级别上用meta标签修复的。因此，在文件_layout.chtml上，我设置了以下内容：

代码语言：javascript
复制
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    ...

2)关于我如何管理自定义操作的功能，我在网上读到，当使用针对动态元素的jQuery时，我们应该开始对固定标记进行过滤-因此我使用了ContainerForJTable。我在动态对象上声明了一个自定义属性seleccionable：

代码语言：javascript
复制
    display: function (data) {
        if (data.record) {
            return '<button id="' + data.record.FileID + '"  class="jtable-command-button glyphicon glyphicon-eye-open seleccionable"></button>';
        }
    }

3)我编写了一个函数(在jtable对象创建-$('#ContainerForJTable').jtable({..之外)，使用我的自定义属性向匹配过滤器的对象添加事件：

代码语言：javascript
复制
    $('#ContainerForJTable').on('click', '.seleccionable', function () {
        var theID = $(this).attr("id");
        //console.log("The id is " + theID);
        viewFiles(theID);
    });

在这些更改之后，jtables对象就可以正常工作了。

谢谢,

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/49003870

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档