FineUI按钮如何在客户端调用jquery函数呢？求解

duke6372 · 发表于 2014-12-15 20:30:17

FineUI按钮如何在客户端调用jquery函数呢？求解需求是pageLload会生成一个highcharts的柱状图。需要通过一个按钮刷新。用asp的按钮可以，用fineui的按钮就不行了。也获取了clientID但是依然没有动静，也没报错。
目前的代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TimeSales.aspx.cs" Inherits="EmptyProjectNet45_FineUI.Charts.TimeSales2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../JS/jquery-1.5.2.js" type="text/javascript"></script>
<script src="../JS/HighCharts/highcharts.js" type="text/javascript"></script>
<script src="../JS/HighCharts/modules/exporting.js" type="text/javascript"></script>
<script>
</script>
</head>
<body>
<form id="form1" runat="server">
<f:PageManager ID="PageManager1" runat="server"></f:PageManager>
<div id="my_container" style="width:600px; height:600px;"></div>
<div id="btn-group">
<button type="button" id="clear-button">Clear Plot</button>
<button type="button" id="refresh-button">Draw Plot</button>
<f:Button ID="Button1" runat="server" Text="Button" EnablePostBack="false"></f:Button>
</div>
</form>
<script type="text/javascript">
var button1ID = '<%= Button1.ClientID %>';
$(function () {
var chart;
// initialization chart and actions
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'my_container',
type: 'column'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
credits: {
enabled: false // remove high chart logo hyper-link
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
// JQuery, mouse click event bind with dom buttons
$('#clear-button').click(function clearPlot() {
//console.log("clear plot data!!!");
var series = chart.series;
while (series.length > 0) {
series[0].remove(false);
}
chart.redraw();
chart.addSeries({
id: 1,
name: "gloomyfish",
data: [1, 2, 3]
}, false);
chart.addSeries({
id: 2,
name: "wang-er-ma",
data: [5, 2, 1]
}, false);
chart.addSeries({
id: 3,
name: "zhang-san",
data: [4, 8, 6]
}, false);
chart.redraw();
});
$("'#" + button1ID+"'").click(function clearPlot() {
console.log(button1ID);
var series = chart.series;
while (series.length > 0) {
series[0].remove(false);
}
chart.redraw();
chart.addSeries({
id: 1,
name: "gloomyfish",
data: [1, 2, 3]
}, false);
chart.addSeries({
id: 2,
name: "wang-er-ma",
data: [5, 2, 1]
}, false);
chart.addSeries({
id: 3,
name: "zhang-san",
data: [4, 8, 6]
}, false);
chart.redraw();
});
});
// clear all series of the chart
function clearPlot() {
//console.log("clear plot data!!!");
var series = chart.series;
while (series.length > 0) {
series[0].remove(false);
}
chart.redraw();
};
function refreshPlot() {
//console.log("refresh plot data!!!");
chart.addSeries({
id: 1,
name: "gloomyfish",
data: [1, 2, 3]
}, false);
chart.addSeries({
id: 2,
name: "wang-er-ma",
data: [5, 2, 1]
}, false);
chart.addSeries({
id: 3,
name: "zhang-san",
data: [4, 8, 6]
}, false);
chart.redraw();
};
setTimeout(function () {
var series = chart.series;
while (series.length > 0) {
series[0].remove(false);
}
chart.redraw();
}, 2000);
// add new series for the chart
setTimeout(function () {
chart.addSeries({
id: 1,
name: "gloomyfish",
data: [1, 2, 3]
}, false);
chart.addSeries({
id: 2,
name: "wang-er-ma",
data: [5, 2, 1]
}, false);
chart.addSeries({
id: 3,
name: "zhang-san",
data: [4, 8, 6]
}, false);
chart.redraw();
}, 2000);
});
</script>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册