【问题标题】:Unable to set data-url value using jQuery in Bootstrap table无法在 Bootstrap 表中使用 jQuery 设置 data-url 值
【发布时间】:2015-03-06 15:43:39
【问题描述】:

我检查了您的示例,它在您的示例中有效,但是当我在示例中尝试时,它不起作用。我不知道我在哪里犯错误。是我使用旧的 jQuery 文件吗?我在这里发布整个 HTML 代码。

HTML 代码

@{
    Layout = null;
}


<!DOCTYPE html>
<html>
<head>
    <title>Refresh method with new url</title>
    <meta charset="utf-8">
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-table.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/bootstrap-table.js"></script>
</head>
<body>
    <div class="container">
        <div class="ribbon">
            <a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/409.html">View Source on GitHub</a>
        </div>
        <h1>Refresh method with new url(<a href="https://github.com/wenzhixin/bootstrap-table/issues/409">#409</a>).</h1>
        <div class="toolbar">
            <button id="refresh" class="btn btn-default">Refresh</button>
        </div>
        <table id="table"
               data-toggle="table"
               data-toolbar=".toolbar"
               data-url='/Report/GetShipments'>
            <thead>
                <tr>
                    <th data-field="id">ID</th>
                    <th data-field="name">Item Name</th>
                    <th data-field="price">Item Price</th>
                </tr>
            </thead>
        </table>
    </div>
    <script>
        var $table = $('#table');
        $(function () {
            $('#refresh').click(function () {
                $table.bootstrapTable('refresh', {
                    url: '/Report/ShowShipment'
                });
            });
        });
    </script>
</body>
</html>

控制器代码。

public class ReportController : Controller
    {
        // GET: Report
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetShipments()
        {
            //IShipments shipments = new ShipmentsClient();
            //var data = shipments.GetShipments(string.Empty, string.Empty, string.Empty, string.Empty);
            //return Json(data, JsonRequestBehavior.AllowGet);

            return Json("test" , JsonRequestBehavior.AllowGet);
            //return new Json()
        }

        public ActionResult ShowShipment()
        {
            //IShipments shipments = new ShipmentsClient();
            //var data = shipments.GetShipments(string.Empty, string.Empty, string.Empty, string.Empty);
            //return Json(data, JsonRequestBehavior.AllowGet);

            return Json("test", JsonRequestBehavior.AllowGet);
            //return new Json()
        }

        public ActionResult Test()
        {
            return View();
        }

    }

当页面加载并点击控制器中的GetShipment()方法,然后我们点击刷新按钮,它应该点击ShowShipment()方法,但不幸的是它总是点击GetShipment()方法。我不知道自己犯了什么错误。

【问题讨论】:

    标签: jquery html asp.net asp.net-mvc twitter-bootstrap


    【解决方案1】:

    我认为您正在寻找数据功能 http://api.jquery.com/data/

    $('#mytable').data('url', 'yoururl')

    编辑:

    好吧,我仔细看看:

    • 你有两个包含 bootstrap-table.css
    • Bootstrap 文件没有像 jQuery 一样被包含在内,它们是否包含在其他地方?
    • 您是否在 javascript 控制台中遇到错误?

    搞定了:

    <html>
    <head>
    </head>
    <body>
    <style type="text/css">
        .the-legend {
            border-style: none;
            border-width: 0;
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 0;
        }
    
        .the-fieldset {
            border: 2px groove threedface #444;
            -webkit-box-shadow: 0px 0px 0px 0px #000;
            box-shadow: 0px 0px 0px 0px #000;
        }
    </style>
    
    <div class='form-horizontal well'>
        <fieldset class="well the-fieldset">
            <legend class="the-legend"><span class="h3">Shipment Filter Criteria</span></legend>
            <div class='row'>
                <div class='col-sm-3'>
                    <div class='form-group'>
                        <label for="user_locale">Carrier</label>
                        <select class="form-control" style="width:200px;" id="user_locale" name="user[locale]">
                            <option value="None" selected="selected">Select Carrier Type</option>
                            <option value="UPS">UPS</option>
                            <option value="USPS">USPS</option>
                            <option value="FEDEX">FEDEX</option>
                        </select>
                    </div>
                </div>
                <div class='col-sm-3'>
                    <div class='form-group'>
                        <label for="user_locale">Package Type</label>
                        <select class="form-control" style="width:200px;" id="user_locale" name="user[locale]">
                            <option value="None" selected="selected">Select Package Type</option>
                            <option value="UPS">UPS</option>
                            <option value="USPS">USPS</option>
                            <option value="FEDEX">FEDEX</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class='row'>
                <div class='col-sm-3'>
                    <div class='form-group'>
                        <label for="user_locale">Shipped Date</label>
                        <input class="form-control" style="width:200px;" data-provide="datepicker" id="shippedDate" />
                    </div>
                </div>
                <div class='col-sm-3'>
                    <div class='form-group'>
                        <label for="user_locale">Schedule Date</label>
                        <input class="form-control" style="width:200px;" data-provide="datepicker" id="scheduleDate" />
                    </div>
                </div>
                <div class='col-sm-6'>
                    <div>
                        <button style="width:150px;height:38px;margin-top:25px;" class="btn btn-primary"
                                onclick="getShipmens()">
                            View Report
                        </button>
                    </div>
                </div>
            </div>
        </fieldset>
        <div class="row">
            <br />
            <table id="table-javascript"></table>
            <table id="mytable" data-url='@Url.Action("GetShipments", "Report", new { carrierType = "UPS", shippedDate = "01/12/14" , scheduleDate = "01/12/14" }, null)' data-toggle="table">
                <thead>
                    <tr>
                        <th data-field="Id" data-sortable="True">Id</th>
                        <th data-field="TrackingNr" data-sortable="True">Tracking Nr</th>
                        <th data-field="Carrier" data-sortable="True">Carrier</th>
                        <th data-field="PackageType" data-sortable="True">Package Type</th>
                        <th data-field="ShippedDate" data-sortable="True">Shipped Date</th>
                        <th data-field="ScheduledDate" data-sortable="True">Scheduled Date</th>
                        <th data-field="ActivityZip" data-sortable="True">Activity Zip</th>
                        <th data-field="ActivityState" data-sortable="True">Activity State</th>
                    </tr>
                </thead>
            </table>
        </div>
    
        <script src="./Scripts/jquery.min.js"></script>
        <script src="./Scripts/bootstrap-table.min.js"></script>
        <link rel="stylesheet" href="./Content/bootstrap-table.min.css">
        <script src="./Scripts/bootstrap.min.js"></script>
        <link rel="stylesheet" href="./Content/bootstrap.min.css">
    
    
        <script type="text/javascript">
        // When the document is ready
        $(document).ready(function () {
    
            $('#shippedDate').datepicker({
                format: "dd/mm/yyyy"
            });
    
            $('#scheduleDate').datepicker({
                format: "dd/mm/yyyy"
            });
    
        });
    
        function getShipmens() {
    
            alert($('#mytable').data('url'));
    
            $('#mytable').data('url', '@Url.Action("GetShipments", "Report")');
    
            alert($('#mytable').data('url'));
    
            $('#mytable').bootstrapTable('refresh');
        }
    
    </script>
    </div>
    </body>
    </html>
    

    【讨论】:

    • 你能给你的HTML吗?
    • 我正在使用引导表并想使用 javascript 设置 data-url 属性,然后想刷新表以便它可以从指定的 url 中提取所有数据。
    • 这是data('url', 'yoururl') 不是data('data-url','')
    • 我都试过了,但是当我调用表的刷新方法时,它会发送未修改的旧网址。
    • 我对你的努力投了赞成票,但似乎我没有很好地解释问题。您是否尝试过使用任何新网址,因为它总是使用旧值访问旧网址。不管我怎么修改它都不起作用。谢谢。
    【解决方案2】:

    您可以使用刷新方法:

    $table.bootstrapTable('refresh', {
        url: 'new url'
    });
    

    我在这里添加了一个示例:http://issues.wenzhixin.net.cn/bootstrap-table/#issues/409.html

    文档:http://bootstrap-table.wenzhixin.net.cn/documentation/#methods

    希望能帮到你。

    【讨论】:

    • 我更新了代码。我很惊讶为什么您的示例有效而我的无效。
    • 终于对我有用了。我发现我正在使用旧的bottstrap-table.js 1.2 的问题,它不支持使用新网址的刷新方法。最后我使用了 bootstrap-table.js 1.5 版,它对我有用。非常感谢大家的努力,
    【解决方案3】:

    设置/更改引导表的data-url的最佳方法是使用refresh方法和refreshOptions:

    $table.bootstrapTable('refreshOptions', {url: 'new url'});
    $table.bootstrapTable('refresh', {url: 'new url'});
    

    如果您不执行 refreshOptions 那么 BootstrapTable 仍将使用旧 url 进行下一次刷新。例如启用服务器端时的分页/排序/搜索。

    如果需要添加加载器图标,则应在调用刷新方法之前添加,并通过onLoadSuccess、onLoadError事件删除加载器图标。

    【讨论】:

      猜你喜欢
      • 2016-03-25
      • 1970-01-01
      • 1970-01-01
      • 2011-10-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-04-07
      相关资源
      最近更新 更多