个人中心
gpt4 book ai didi

javascript - 使用 ajax 的 YUI 数据表

转载 作者：行者123 更新时间：2023-11-28 10:01:43 25 4
gpt4 key购买 nike

我开发了一个显示人员表(YUI 数据表)并具有搜索框的 asp 页面。如果在搜索框中搜索数据，则使用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 添加一个字段或列定义，然后在返回的 XML 数据中包含一个唯一的 Id。

关于javascript - 使用 ajax 的 YUI 数据表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9060530/

25 4 0
文章推荐： css - 页脚不在页面底部
文章推荐： javascript - 灯箱不显示 Jquery
文章推荐： jquery - CSS - 模拟 :hover effect on touchscreen devices
文章推荐： css - 悬停后下拉导航菜单项消失
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com