FineUI 官方论坛

标题: FineUI按钮如何在客户端调用jquery函数呢？求解 [打印本页]
作者: duke6372    时间: 2014-12-15 20:30
标题: FineUI按钮如何在客户端调用jquery函数呢？求解
FineUI按钮如何在客户端调用jquery函数呢？求解需求是pageLload会生成一个highcharts的柱状图。需要通过一个按钮刷新。用asp的按钮可以，用fineui的按钮就不行了。也获取了clientID但是依然没有动静，也没报错。
目前的代码
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TimeSales.aspx.cs" Inherits="EmptyProjectNet45_FineUI.Charts.TimeSales2" %>

  3. <!DOCTYPE html>

  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <title></title>
  8.         <script src="../JS/jquery-1.5.2.js" type="text/javascript"></script>
  9.     <script src="../JS/HighCharts/highcharts.js" type="text/javascript"></script>
  10.     <script src="../JS/HighCharts/modules/exporting.js" type="text/javascript"></script>
  11.     <script>
  12.         

  14.     </script>  
  15. </head>
  16. <body>
  17.     <form id="form1" runat="server">
  18.         <f:PageManager ID="PageManager1" runat="server"></f:PageManager>
  19. <div id="my_container" style="width:600px; height:600px;"></div>  
  20. <div id="btn-group">  
  21.     <button type="button" id="clear-button">Clear Plot</button>  
  22.     <button type="button" id="refresh-button">Draw Plot</button>  
  23.     <f:Button ID="Button1" runat="server" Text="Button" EnablePostBack="false"></f:Button>
  24. </div>  
  25.     </form>
  26.     <script type="text/javascript">
  27.         var button1ID = '<%= Button1.ClientID %>';
  28.         $(function () {
  29.             var chart;

  31.             // initialization chart and actions  
  32.             $(document).ready(function () {
  33.                 chart = new Highcharts.Chart({
  34.                     chart: {
  35.                         renderTo: 'my_container',
  36.                         type: 'column'
  37.                     },
  38.                     title: {
  39.                         text: 'Fruit Consumption'
  40.                     },
  41.                     xAxis: {
  42.                         categories: ['Apples', 'Bananas', 'Oranges']
  43.                     },
  44.                     yAxis: {
  45.                         title: {
  46.                             text: 'Fruit eaten'
  47.                         }
  48.                     },
  49.                     credits: {
  50.                         enabled: false // remove high chart logo hyper-link  
  51.                     },
  52.                     series: [{
  53.                         name: 'Jane',
  54.                         data: [1, 0, 4]
  55.                     }, {
  56.                         name: 'John',
  57.                         data: [5, 7, 3]
  58.                     }]
  59.                 });

  61.                 // JQuery, mouse click event bind with dom buttons  
  62.                 $('#clear-button').click(function clearPlot() {
  63.                     //console.log("clear plot data!!!");
  64.                     var series = chart.series;
  65.                     while (series.length > 0) {
  66.                         series[0].remove(false);
  67.                     }
  68.                     chart.redraw();
  69.                     chart.addSeries({
  70.                         id: 1,
  71.                         name: "gloomyfish",
  72.                         data: [1, 2, 3]
  73.                     }, false);
  74.                     chart.addSeries({
  75.                         id: 2,
  76.                         name: "wang-er-ma",
  77.                         data: [5, 2, 1]
  78.                     }, false);
  79.                     chart.addSeries({
  80.                         id: 3,
  81.                         name: "zhang-san",
  82.                         data: [4, 8, 6]
  83.                     }, false);

  85.                     chart.redraw();
  86.                 });



  90.                 $("'#" + button1ID+"'").click(function clearPlot() {
  91.                     console.log(button1ID);
  92.                     var series = chart.series;
  93.                     while (series.length > 0) {
  94.                         series[0].remove(false);
  95.                     }
  96.                     chart.redraw();
  97.                     chart.addSeries({
  98.                         id: 1,
  99.                         name: "gloomyfish",
  100.                         data: [1, 2, 3]
  101.                     }, false);
  102.                     chart.addSeries({
  103.                         id: 2,
  104.                         name: "wang-er-ma",
  105.                         data: [5, 2, 1]
  106.                     }, false);
  107.                     chart.addSeries({
  108.                         id: 3,
  109.                         name: "zhang-san",
  110.                         data: [4, 8, 6]
  111.                     }, false);

  113.                     chart.redraw();
  114.                 });


  117.             });

  119.             // clear all series of the chart  
  120.             function clearPlot() {
  121.                 //console.log("clear plot data!!!");  
  122.                 var series = chart.series;
  123.                 while (series.length > 0) {
  124.                     series[0].remove(false);
  125.                 }
  126.                 chart.redraw();
  127.             };

  129.             function refreshPlot() {
  130.                 //console.log("refresh plot data!!!");  
  131.                 chart.addSeries({
  132.                     id: 1,
  133.                     name: "gloomyfish",
  134.                     data: [1, 2, 3]
  135.                 }, false);
  136.                 chart.addSeries({
  137.                     id: 2,
  138.                     name: "wang-er-ma",
  139.                     data: [5, 2, 1]
  140.                 }, false);
  141.                 chart.addSeries({
  142.                     id: 3,
  143.                     name: "zhang-san",
  144.                     data: [4, 8, 6]
  145.                 }, false);

  147.                 chart.redraw();
  148.             };

  150.             setTimeout(function () {
  151.                 var series = chart.series;
  152.                 while (series.length > 0) {
  153.                     series[0].remove(false);
  154.                 }
  155.                 chart.redraw();
  156.             }, 2000);

  158.             // add new series for the chart  
  159.             setTimeout(function () {
  160.                 chart.addSeries({
  161.                     id: 1,
  162.                     name: "gloomyfish",
  163.                     data: [1, 2, 3]
  164.                 }, false);
  165.                 chart.addSeries({
  166.                     id: 2,
  167.                     name: "wang-er-ma",
  168.                     data: [5, 2, 1]
  169.                 }, false);
  170.                 chart.addSeries({
  171.                     id: 3,
  172.                     name: "zhang-san",
  173.                     data: [4, 8, 6]
  174.                 }, false);

  176.                 chart.redraw();
  177.             }, 2000);
  178.         });
  179.     </script>
  180. </body>
  181. </html>
复制代码







欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/) Powered by Discuz! X3.4