2015-01-08 4 views
1

Я проверил ваш пример, и он работает в вашем примере, но когда я попробовал его в своем примере, он не работает. Я не знаю, где я делаю ошибки. Является ли это тем, что я использую старые файлы jQuery? Я размещаю здесь весь HTML-код.Невозможно установить значение url-данных, используя jQuery в таблице Bootstrap

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(). Я не знаю, какую ошибку я делаю.

ответ

8

Вы можете использовать обновления метод:

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

я добавил пример здесь: http://issues.wenzhixin.net.cn/bootstrap-table/#issues/409.html

Документация: http://bootstrap-table.wenzhixin.net.cn/documentation/#methods

Hop e, чтобы помочь вам.

+0

Я обновил код. Я удивлен, почему ваш пример работает, а мой нет. – Awadhendra

+1

Наконец, это работает для меня. Я нашел проблему, что я использую старый файл bottstrap-table.js 1.2, который не поддерживает метод обновления с новым URL-адресом. В корне я использовал bootstrap-table.js версии 1.5, и он работает для меня. Большое спасибо всем за ваши усилия, – Awadhendra

0

Я думаю, что вы ищете функции данных http://api.jquery.com/data/

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

Edit:

Ну я присмотрелся:

  • У вас есть два включают в загрузчике -table.css
  • Файлы Bootstrap также не включены s 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> 
+0

Я передал значение в yoururl, но он не работает. – Awadhendra

+0

вы можете дать свой HTML-код? – Lanfeust

+0

Я добавил html код и метод контроллера. – Awadhendra

1

Лучшим способ для установки/изменение данных для URL из начальной загрузки таблицы является использование обновления методы вместе с refreshOptions:

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

Если вы не сделаете refreshOptions то BootstrapTable все равно будет использовать старый URL для следующих обновлений , Например, для разбивки на страницы/сортировки/поиска, когда серверная сторона включена.

Если вам нужно добавить значок загрузчика, вам следует добавить перед вызовом метод обновления и удалить значок загрузчика с событиями onLoadSuccess, onLoadError.

Смежные вопросы