在javascript网格中插入href [英] insert href in javascript grid
本文介绍了在javascript网格中插入href的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这个代码在javascript网格中显示我的数据：
i have this code to show my data in javascript grid:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQueryGridTemplate.aspx.cs"Inherits="JqueryGridDemo.JQueryGridTemplate" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery Grid Template Demo</title>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery.tmpl.js" type="text/javascript"></script>
<style type="text/css">
#tblEmployee td
{
padding: 2px;
background: #e8edff;
border-top: 1px solid #fff;
color: #669;
}
#tblEmployee th
{
padding: 2px;
color: #039;
background: #b9c9fe;
}
</style>
<script type="text/javascript">
function BindClientSideData() {
//JSON data format
var emps = [
{ Name: "John", Designation: "Analyst", Age: 25, Department: "IT", DataSource: "Client" },
{ Name: "Matthew", Designation: "Manager", Age: 38, Department: "Accounts", DataSource: "Client" },
{ Name: "Emma", Designation: "Senior Manager", Age: 40, Department: "HR", DataSource: "Client" },
{ Name: "Sid", Designation: "Analyst", Age: 27, Department: "HR", DataSource: "Client" },
{ Name: "Tom", Designation: "Senior Analyst", Age: 35, Department: "IT", DataSource: "Client" }
];
BindTable(emps);
}
function BindServerSideData() {
$.ajax({
type: "POST",
url: "JQueryGridTemplate.aspx/GetEmployees", //pagename.aspx/WebMethodname
data: "{}",// Blank data
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg, status, metaData) {
if (msg.d && msg.d.length > 0) {
BindTable(msg.d);
}
},
error: function(ex, status) {
//alert(ex.responseText);
alert("error");
},
complete: function(eret, tytyt) {
//alert("complete");
}
});
return false;
}
function BindTable(data) {
// removes existing rows from table except header row
$('#tblEmployee tr:gt(0)').remove();
//apply tmpl plugin to <script> and append result to table
$("#employeeTemplate").tmpl(data).appendTo("#tblEmployee");
}
</script>
<%--table row layout with data binding--%>
<script id="employeeTemplate" type="text/html">
<tr>
<td> ${Name}</td>
<td>${Designation}</td>
<td>{{if Age>30}}
<span style='background-color:red'>Middle-aged</span>
{{else}}
<span style='background-color:yellow'>Still young</span>
{{/if}}</td>
<td>${Department}</td>
<td> ${DataSource}</td>
</tr>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="btnClient" type="button" value="Bind Grid with Client Data" önclick="BindClientSideData()" />
<asp:Button Text="Bind Grid with Server Data" runat="server" ID="btnServer" OnClientClick="javascript:return BindServerSideData()" />
<br />
<br />
<table id="tblEmployee">
<thead>
<tr>
<th>
Name
</th>
<th>
Designation
</th>
<th>
Age
</th>
<th>
Department
</th>
<th>
Data Source
</th>
<th>
Data Source
</th>
<th>
<a id="btnSelectCustomer1" href=#">Select</a>
<a href=#">View Report</a>
<a href=#">Submit</a>
</th>
</tr>
</thead>
</table>
</div>
</form>
</body></html>
i想在每一行的最后一个colm上放一个链接按钮。请告诉我怎么做。
提前谢谢
i want to put a link button at the last colm each row. please tell me how to do it.
Thanks in advance
推荐答案
.ajax（{
type： POST，
url： < span class =code-string> JQueryGridTemplate.aspx / GetEmployees， // pagename.aspx / WebMethodname
数据： {}， // 空白数据
contentType： application / json; charset = utf-8，
dataType： json，
成功： function （msg，status，metaData）{
if （msg.d&& msg.d.length> 0 ）{
BindTable（msg.d）;
}
}，
错误： function （例如，状态）{
// alert（ex.responseText）;
alert（ 错误）;
}，
complete： function （eret，tytyt）{
// alert（complete）;
}
}）;
return false ;
}
function BindTable（data）{
// 从表中删除除标题行之外的现有行
.ajax({ type: "POST", url: "JQueryGridTemplate.aspx/GetEmployees", //pagename.aspx/WebMethodname data: "{}",// Blank data contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg, status, metaData) { if (msg.d && msg.d.length > 0) { BindTable(msg.d); } }, error: function(ex, status) { //alert(ex.responseText); alert("error"); }, complete: function(eret, tytyt) { //alert("complete"); } }); return false; } function BindTable(data) { // removes existing rows from table except header row
（' ＃tblEmployee tr：gt（0）'）。remove（）;
// 将tmpl插件应用于< script>并将结果附加到表
('#tblEmployee tr:gt(0)').remove(); //apply tmpl plugin to <script> and append result to table
（ ＃employeeTemplate).tmpl(data).appendTo( ＃tblEmployee）;
}
< / 脚本 >
<％ - 具有数据绑定的表格行布局 - ％>
< span class =code-keyword>< script id = employeeTemplate type = text / html >
< tr >
& lt; td >
("#employeeTemplate").tmpl(data).appendTo("#tblEmployee"); } </script> <%--table row layout with data binding--%> <script id="employeeTemplate" type="text/html"> <tr> <td>
这篇关于在javascript网格中插入href的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
