kendoUI如何刷新数据源

前端之家收集整理的这篇文章主要介绍了kendoUI如何刷新数据源前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。


效果如下,点击后左侧Navigator Bar刷新





init显示代码

  1. <div data-role="view" id="listview-templates" data-init="mobileListViewTemplatesInit" data-title="ListView" data-transition="slide">
  2. <ul style="float: left; width: 30%" id="custom-listview"></ul>
  1. <input id="metricId" type="hidden" value="34"/>
  2. <input id="metricUrl" type="hidden" value="http://localhost:3458/EmiteDataService/Nodes"/>
  3. <input id="metricStatus" type="hidden" value="0"/>


模板函数

  1. <script id="customListViewTemplate" type="text/x-kendo-template">
  2. <div>
  3. <h3 class="item-title">#= MetricName #</h3>
  4. <p class="item-info">#= HostName #</p>
  5. <a data-role="button" onclick="GetMetricNodes('#= NodeId #')">View</a>
  6. <a data-role="button" class="details-link" onclick="GetChartById('#= MetricId #')">Next</a>
  7. </div>
  8. </script>


然后是初始化时的载入函数(mobileListViewTemplatesInit)

  1. <script>
  2.  
  3.  
  4. var metricNode = new kendo.data.DataSource({
  5. transport: {
  6. read: {
  7. // the remote service url
  8. url:"http://localhost:3458/EmiteDataService/Nodes",// JSONP is required for cross-domain AJAX
  9. dataType: "jsonp",// additional parameters sent to the remote service
  10. data: {
  11. userName:function(){
  12. return 'admin';
  13. },userDomain:function(){
  14. return 'admin';
  15. },status:function(){
  16. return $('#metricStatus').val()
  17. }
  18. }
  19. }
  20. },// describe the result format
  21. schema: {
  22. // the data which the data source will be bound to is in the "results" field
  23. data: ""
  24. },change: function() { // subscribe to the CHANGE event of the data source
  25. //alert($('#metricId').val());
  26. /*$("#tweets").html(kendo.render(template,this.view()));*/
  27. }
  28. });
  29.  
  30.  
  31.  
  32. function mobileListViewTemplatesInit() {
  33. $("#custom-listview").kendoMobileListView({
  34. dataSource:metricNode,template: $("#customListViewTemplate").html()
  35. });
  36. }
  37. </script>



点击button后的触发函数
  1. <script type="text/javascript">
  2. function GetChartById(index){
  3. //this.element.prop("id")
  4. $('#metricId').attr("value",index);
  5.  
  6. dataSource = new kendo.data.DataSource({
  7. transport: {
  8. read: {
  9. // the remote service url
  10. url: "http://localhost:3458/EmiteDataService/GetMetricCharts",// additional parameters sent to the remote service
  11. data: {
  12. aggregationType:function(){
  13. return $("#aggregationType").val();
  14. },timeRange:function(){
  15. return $("#timeRange").val();
  16. },metricid:function(){
  17. return $("#metricId").val();
  18. },stDate:'2011-10-29T16:00:00.000Z',enDate:function(){
  19. return edTime;
  20. }
  21.  
  22. }
  23. }
  24. },change: function() { // subscribe to the CHANGE event of the data source
  25. //alert("fffdds");
  26. /*$("#tweets").html(kendo.render(template,this.view()));*/
  27. }
  28. });
  29.  
  30. createChart();
  31. }
  32.  
  33.  
  34. function GetMetricNodes(index)
  35. {
  36. $('#metricId').attr("value",index);
  37. metricNode = new kendo.data.DataSource({
  38. transport: {
  39. read: {
  40. // the remote service url
  41. url:"http://localhost:3458/EmiteDataService/ChildNodes",parentNodeId:function(){
  42. return $('#metricId').val()
  43. }
  44. }
  45. }
  46. },this.view()));*/
  47. }
  48. });
  49.  
  50. metricNode.read();
  51. mobileListViewTemplatesInit();
  52.  
  53. }
  54.  
  55.  
  56. </script>



其实原理很简单,不过就是定义一个数据源然后绑定到控件上面,触发button点击事件的时候,通过一个隐藏的input,修改其中value的值,指的一提的是,数据源中的参数选择是读取input中value的值,如果input中value的值产生变更,request wcf的参数也将产生变化,由此我们可以完成修改数据源绑定的问题。

猜你在找的Json相关文章