YUI数据表与AJAX
我开发了一个ASP页面，显示人表（YUI数据表），并有搜索框。如果在搜索框中搜索数据，则使用ajax回发更新数据表。YUI数据表与AJAX
<html> <head>
<title>Testing Datatable</title>
<!--CSS file (default YUI Sam Skin) -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/datatable/assets/skins/sam/datatable.css">
<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/datasource/datasource-min.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js" type="text/javascript"></script>
<!-- Source files -->
<script src="http://yui.yahooapis.com/2.9.0/build/datatable/datatable-min.js"></script>
<style type="text/css">
/* basic skin styles */
.yui-skin-sam .yui-dt table {
margin:0;
padding:0;
font-family:arial;font-size:inherit;
border-collapse:separate;*border-collapse:collapse;border-spacing:0; /* since ie6 and ie7 behave differently */
border:0;
}
.yui-skin-sam .yui-dt th,
.yui-skin-sam .yui-dt th a {
font-weight:normal;
text-decoration:none;
color:#000; /* header text */
vertical-align:bottom;
background-color:#EEEEFF;
}
.yui-skin-sam .yui-dt th {
margin:0;
padding:0;
border:0;
border-top: 1px Solid #CCCCCC;
border-bottom: 1px Solid #CCCCCC;
font-weight: bold;
}
.yui-skin-sam .yui-dt tr.yui-dt-first td {
border:0; /* tbody top border */
border-bottom: 1px Solid #CCCCCC;
}
.yui-skin-sam .yui-dt th .yui-dt-liner {
white-space:nowrap;
background-color:#EEEEFF;
}
.yui-skin-sam .yui-dt-coltarget {
width: 5px;
}
.yui-skin-sam .yui-dt td {
margin:0;
padding:0;
border:none;
border-bottom: 1px Solid #CCCCCC;
text-align:left;
}
/* sortable columns */
.yui-skin-sam thead .yui-dt-sortable {
cursor:pointer;
}
.yui-skin-sam th.yui-dt-asc,
.yui-skin-sam th.yui-dt-desc {
background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -100px; /* sorted header gradient */
background-color:#EEEEFF;
}
/* striping */
.yui-skin-sam tr.yui-dt-even { background-color:#FFF; } /* white */
.yui-skin-sam tr.yui-dt-odd { background-color:#F9F9F9; } /* light blue */
.yui-skin-sam tr.yui-dt-even td.yui-dt-asc,
.yui-skin-sam tr.yui-dt-even td.yui-dt-desc { background-color:#FFF; } /* light blue sorted */
.yui-skin-sam tr.yui-dt-odd td.yui-dt-asc,
.yui-skin-sam tr.yui-dt-odd td.yui-dt-desc { background-color:#F9F9F9; } /* dark blue sorted */
/* disable striping in list mode */
.yui-skin-sam .yui-dt-list tr.yui-dt-even { background-color:#FFF; } /* white */
.yui-skin-sam .yui-dt-list tr.yui-dt-odd { background-color:#FFF; } /* white */
.yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-asc,
.yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-desc { background-color:#F9F9F9; } /* light blue sorted */
.yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-asc,
.yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-desc { background-color:#F9F9F9; } /* light blue sorted */
</style>
</head>
<body class="yui-skin-sam">
<input type="text" id="Search" /><input type="button" value="Search" onclick="myDataTable.AjaxSearch();" />
<div id="PersonContainer">
<table id="PersonTable">
<tr>
<td>Mg Mg</td>
<td>22</td>
<td>Factory Worker</td>
</tr>
<tr>
<td>Ko Ko</td>
<td>21</td>
<td>General Worker</td>
</tr>
<tr>
<td>Aung Aung</td>
<td>25</td>
<td>Office Staff</td>
</tr>
<tr>
<td>Aung Ko</td>
<td>22</td>
<td>Office Staff</td>
</tr>
<tr>
<td>Mg Aye</td>
<td>25</td>
<td>Office Staff</td>
</tr>
<tr>
<td>Min Aung</td>
<td>25</td>
<td>Office Staff</td>
</tr>
</table>
</div>
<script type="text/javascript">
var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("PersonTable"));
myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
myDataSource.responseSchema = {
fields: [
{ key: "Name"},
{ key: "Age" },
{ key: "Occupation" }
]
};
var myColumnDefs = [
{ key: "Name", sortable:true},
{ key: "Age", sortable:true},
{ key: "Occupation", sortable:true}
];
var myDataTable = new YAHOO.widget.DataTable("PersonContainer", myColumnDefs, myDataSource);
myDataTable.AjaxSearch = function(){
var sUrl = "AjaxTest1.asp";
var callback = {
success: function(o) {
if (window.DOMParser)
{
parser = new DOMParser();
xmlDoc = parser.parseFromString(o.responseText,"text/xml");
}
else // Internet Explorer
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(o.responseText);
}
var myDataSource = new YAHOO.util.DataSource(xmlDoc);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
alert(o.responseText);
myDataSource.responseSchema = {
resultNode: "person",
fields: [
{ key: "Name"},
{ key: "Age" },
{ key: "Occupation" }
]
};
var myColumnDefs = [
{ key: "Name", sortable:true},
{ key: "Age", sortable:true},
{ key: "Occupation", sortable:true}
];
var myDataTable = new YAHOO.widget.DataTable("PersonContainer", myColumnDefs, myDataSource);
},
failure: function(o) {
alert("AJAX doesn't work"); //FAILURE
}
}
var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback);
};
</script>
</body>
</html>
即返回XML数据：
<?xml version=""1.0""?> <person><Name>Aung Aung</Name><Age>25</Age><Occupation>Developer</Occupation></person>
<person><Name>Mg Mg</Name><Age>20</Age><Occupation>Programmer</Occupation></person>
返回数据是两行。但数据表显示了一行。我怎样才能做到这一点显示返回行？
回答：
我不确定这是否相关，但我已经看到了一些情况下，如果没有提供ID，YUI只是一个。在这些情况下，我们看到由于它关闭了此Id而丢失了行。我想要的第一个想法是为Id添加一个字段或列def，然后在返回的XML数据中包含一个唯一的Id。
以上是 YUI数据表与AJAX 的全部内容， 来源链接： utcz.com/qa/267292.html
