不用找了,比较全的signalR例子已经为你准备好了(2)---JqGrid 服务端刷新方式-注释详细-DEMO源码下载

    

   上次用客户端进行数据刷新的方式,和官方的Demo实现存在差异性,今天花了一点时间好好研究了一下后台时时刷新的方式.将写的代码重新update了一次,在这之前找过好多的资料,发现都没有找到好的例子,自己查了一下官方的DEMO然后本地实现了一次,结合Jqgrid的前端库,发现还是非常便捷的.不多说了,直接上代码了.

 

前端代码:

 

  1 <!DOCTYPE html>

  2 <html xmlns="http://www.w3.org/1999/xhtml">

  3 <head>

  4     <link href="Style/jquery-ui.css" rel="stylesheet" />

  5     <link href="Style/ui.jqgrid.css" rel="stylesheet" />

  6     <link href="Style/ui.jqgrid-bootstarp.css" rel="stylesheet" />

  7 

  8     <!--Reference the jQuery library. this library should be first one  -->

  9     <script src="Scripts/jquery-1.10.2.min.js"></script>

 10     <!--Reference the SignalR library. -->

 11     <script src="Scripts/jquery.signalR-2.0.2.js"></script>

 12     <!--Reference the jqgrid core library. -->

 13     <script src="Scripts/jquery.jqGrid.min.js"></script>

 14     <!--Reference the jqgrid language library. -->

 15     <script src="Scripts/grid.locale-en.js"></script>

 16     <!--Reference the autogenerated SignalR hub script. -->

 17     <script src='signalr/hubs'></script>

 18 

 19     <script type="text/javascript">

 20 

 21         var mydata = { State: "none", Price: 1.99, Brand: "none" };

 22 

 23         var ticket;

 24 

 25         $(function () {

 26             InitJqGrid();

 27             ticket = $.connection.pricehub;

 28             InitTicket(ticket);

 29             $.connection.hub.start().done(function () {

 30 

 31                 $("#btnstart").click(function () {

 32                     ticket.server.startTickets();

 33                 });

 34 

 35 

 36 

 37                 $("#btnstop").click(function () {

 38                     ticket.server.stopTickets();

 39                 });

 40             });

 41 

 42         })

 43 

 44 

 45 

 46         //

 47         function InitJqGrid() {

 48             $("#tbprice").jqGrid({

 49                 datatype: "local",

 50                 data: mydata,

 51                 height: 600,

 52                 width: 500,

 53                 multiselect: false,

 54                 autowidth: true,

 55                 rownumbers: true,

 56                 rowNum: 50, //if you don't set this ,the page size will just show about 20 row counts.

 57                 colNames: ['State', 'Price', 'Brand'],

 58                 colModel: [

 59                     { label: 'State', name: 'State', width: 60 },

 60                     { label: 'Price', name: 'Price', width: 80 },

 61                     { label: 'Brand', name: 'Brand', width: 80 }

 62                 ],

 63                 viewrecords: true, // show the current page, data rang and total records on the toolbar

 64                 caption: "Current Price Tag",

 65                 pager: "#jqGridPager"

 66             });

 67         }

 68 

 69 

 70         function refreshGrid($grid, results) {

 71             $grid.jqGrid('clearGridData')

 72                  .jqGrid('setGridParam', { data: results })

 73                  .trigger('reloadGrid');

 74         }

 75 

 76 

 77         function InitTicket(ticket) {

 78             //init the client function

 79             ticket.client.updateprice = function (tickets) {

 80                 refreshGrid($("#tbprice"), tickets);

 81             }

 82         }

 83     </script>

 84 

 85     <title>Price Price </title>

 86 

 87 

 88 </head>

 89 <body>

 90 

 91 

 92     <div>

 93         <input type="button" id="btnstart" value="Start" />

 94 

 95         <input type="button" id="btnstop" value="Stop" />

 96     </div>

 97     <div>

 98         <table id="tbprice"></table>

 99         <div id="jqGridPager"></div>

100     </div>

101 </body>

102 

103 

104 

105 </html>

 

后端代码:

 

 1 using Microsoft.AspNet.SignalR;

 2 using Microsoft.AspNet.SignalR.Hubs;

 3 using SignalRChat.Hubs.Data;

 4 using System;

 5 using System.Collections.Generic;

 6 using System.Linq;

 7 using System.Web;

 8 using System.Threading;

 9 

10 namespace SignalRChat.Hubs

11 {

12     [HubName("pricehub")]

13     public class PriceHub : Hub

14     {

15         private readonly TicketPrice _ticketprice = new TicketPrice();

16 

17         private readonly object _ticketrefreshlock = new object();

18 

19         private readonly object _ticketupdatelock = new object();

20 

21         //the time val should be static or in the static class 

22         private static Timer _timer;

23 

24         //the Interval of call function 

25         private readonly TimeSpan _updateInterval = TimeSpan.FromMilliseconds(2000);

26 

27         private static string state = "close";

28 

29         [HubMethodName("startTickets")]

30         public void StartTickets()

31         {

32             lock (_ticketrefreshlock)

33             {

34                 //the judge if it is necessary to init another thread to fresh the value 

35                 if (state == "close")

36                 {

37                     _timer = new Timer(RefreshTicket, null, _updateInterval, _updateInterval);

38                     state = "open";

39                 }

40             }

41         }

42 

43 

44 

45         [HubMethodName("stopTickets")]

46         public void StopTickets()

47         {

48             lock (_ticketrefreshlock)

49             {

50                 if (state == "open")

51                 {

52                     if (_timer != null)

53                     {

54                         _timer.Dispose();

55                         state = "close";

56                     }

57                 }

58             }

59         }

60 

61         private void RefreshTicket(object state)

62         {

63             lock (_ticketupdatelock)

64             {

65                 //return the tickets to client 

66                 BroadcastPriceTicketBoard(_ticketprice.GetAllTickets());

67             }

68         }

69 

70 

71         //this is the reference for client broswer to update the price ,and pass the value to client .

72         private void BroadcastPriceTicketBoard(List<TicketPrice> tickets)

73         {

74             //call the client javascript function to refresh data to jqgrid table(the caller proproty mean the data only to pass to caller ,not all clients)

75             Clients.Caller.updateprice(tickets);

76         }

77 

78     }

79 }

 

效果图:

 

 

参考:

===>JqGridDemo<===

 

===>SignalR-StockTicker-Demo<===

 

项目文件:

 

===>官方StockTicker.zip<===

 

===>图中演示项目<===

 

你可能感兴趣的:(jqGrid)