动态列表项目之二

上一节介绍的动态列表项目,其实是不够动态的,因为列表内容是固化在js代码文件中的,如果列表项目要根据后台数据库内容动态生成,显然这种方式是行不通的。

假定后台有个名为"汽车"的数据表:

前台的录入界面如下图,希望选择不同的国家后,能自动根据后台数据表的内容,列出该国的汽车品牌供选择:

设计步骤

1、在"d:\web"目录下,建立一个子目录lib,在这个目录建立一个文本文件,文件名为"brands.js",文件内容为:

function getBrands(){
    var gj=document.getElementById("国家").value;
    setOptions("品牌",document.getElementById(gj).innerHTML);
}

2、HttpRequest事件代码:

Select Case e.Path
    Case "test.htm"
        Dim wb As New weui
        wb.AddForm("","form1","test.htm")
        Dim gjs As List(of String) = DataTables(
"
汽车").GetValues("国家")
        With wb.AddInputGroup("form1","ipg1",
"
动态列表")
            .AddSelect(
"
国家","国家","|" & String.Join("|",gjs.ToArray)).Attribute = "onchange='getBrands()'"  '调用js函数。
            .AddSelect(
"
品牌","品牌","")
        End With
        With wb.AddButtonGroup("form1","btg1",True)
            .Add("btn1",
"
确定", "submit")
        End With
        For Each gj As String In gjs
           
'插入一些隐藏段落,用于存储各个国家的汽车品牌
            wb.InsertHTML("<p hidden id='" & gj & "'>" & DataTables("汽车").GetComboListString("品牌","国家='" & gj & "'") & "</p>")
        Next
        wb.AppendHTML("<script src='./lib/brands.js'></script>") '引入脚本文件
        e.WriteString(wb.Build) '生成网页
End Select

设计的思路很简单,就是生成的网页中,插入一些隐藏的段落,段落id为国家名称,内容为该国家的汽车品牌:

<p hidden id='德国'>奥迪|宝马|奔驰|大众|欧宝</p>
<p hidden id='日本'>本田|丰田|雷克萨斯|讴歌|日产</p>
<p hidden id='中国'>比亚迪|长城|吉利|奇瑞|荣威</p>

当用户选择不同国家后,触发onchange事件,执行getBrand函数,自动找出对应的段落,从中提取出列表项目。


本页地址:http://www.foxtable.com/mobilehelp/topics/0100.htm