级联及下拉表格 简单用例

最新推荐文章于 2024-05-15 16:32:52 发布
最新推荐文章于 2024-05-15 16:32:52 发布
阅读量650 收藏
点赞数
分类专栏： jquery运用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36802930/article/details/80320252
版权
本文介绍了一种在前端页面中实现级联和下拉表格的简单用例，涵盖了如何创建联动效果和数据展示的关键步骤，对于前端开发者在构建交互式表格时具有参考价值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前台页面:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<%--  <link type="text/css" rel="stylesheet" href="/css/jquery.autocomplete.css" />                  
 <script src="/css/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="/css/jquery.autocomplete.js"></script>--%>

   <link href="/css/jquery-ui-1.10.4.custom.css" rel="stylesheet"
        type="text/css" />
    <script src="/css/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="/css/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>
  
    <title></title>
     <script language="javascript" type="text/javascript">
         $(function () {
             $("#Button1").hide();
             $('#name').autocomplete({
                 source: strArr,
                 change: function (event, ui) {
                     // ui.item is undefined :( where is the problem?

                     document.getElementById("Button1").click();
                 }
             });
         });


    </script>


    <style type="text/css">
    #table
    {
        margin-left:365px;
        margin-top:0px;
        width:470px;
        }
    </style>
</head>
<body style="height: 438px">
    <form id="form1" runat="server">
    <div>
    
        省份:
      <input type="text"  runat="server" id="name"  />  城市:
        <asp:DropDownList ID="DropDownList2" runat="server" Height="22px" Width="118px" 
            AutoPostBack="true" onselectedindexchanged="DropDownList2_SelectedIndexChanged">
        </asp:DropDownList>
    
         地区:
        <asp:DropDownList ID="DropDownList3" runat="server" Height="24px" Width="125px">
        </asp:DropDownList>
    
    
        <asp:Button ID="Button1" runat="server" οnclick="Button1_Click" Text="确 定" display="none"/>
    
    
        <asp:Button ID="Button4" runat="server" Text="重 置" οnclick="Button4_Click" />
    
    
    </div>
    <div id="table"> 

   <asp:GridView ID="GridView1" runat="server" RowStyle-Height="25px" 
          HeaderStyle-Height="25px" AllowSorting="True"  
            EmptyDataText="<div align=center><font color=red><br/><br/><B>没有找到相关记录</B><br/><br/></font></div>"  
            GridLines="None" Width="86%" HorizontalAlign="Center" 
            AutoGenerateColumns="False"  
         >
        <Columns>
        


         <asp:TemplateField ItemStyle-Width="40px" ItemStyle-Height="25px"  ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="left">
         
        

<HeaderStyle HorizontalAlign="Left"></HeaderStyle>

<ItemStyle HorizontalAlign="Left" Height="25px" Width="40px"></ItemStyle>
        </asp:TemplateField>


         <%--       <asp:TemplateField ItemStyle-Width="40px" ItemStyle-Height="25px"  ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="left">
                 <HeaderTemplate>
                 <asp:CheckBox ID="CheckBox1" runat="server" Text="选"  Font-Size="12px" AutoPostBack="true"   OnCheckedChanged="CheckBox1_CheckedChanged"  Height="20px" />
                 </HeaderTemplate>
                 <ItemTemplate>
                     <asp:CheckBox ID="Chbk" runat="server"  />
                 </ItemTemplate>
        </asp:TemplateField>--%>


          
        
        
        <asp:TemplateField HeaderText="选择" HeaderStyle-Font-Size="12px" ItemStyle-Width="40px" ItemStyle-Height="25px"  ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="left">
                 <ItemTemplate>
                     <asp:CheckBox ID="Chbk" runat="server"  />
                 </ItemTemplate>
        </asp:TemplateField>






      <asp:BoundField  DataField="tableID"   HeaderText="地区ID" ControlStyle-CssClass="Boxx" ControlStyle-Width="150px" SortExpression="tableID">
            <ItemStyle HorizontalAlign="Left"  Font-Size="12px" Width="80px"  />

        <ControlStyle CssClass="Boxx" Width="150px"></ControlStyle>

            <HeaderStyle HorizontalAlign="Left" Font-Size="12px"  />

        </asp:BoundField>
    
      
      <asp:BoundField  DataField="cityID"   HeaderText="城市ID" ControlStyle-CssClass="Boxx" ControlStyle-Width="150px" SortExpression="cityID">
            <ItemStyle HorizontalAlign="Left"  Font-Size="12px" Width="80px"  />
        <ControlStyle CssClass="Boxx" Width="150px"></ControlStyle>

            <HeaderStyle HorizontalAlign="Left" Font-Size="12px"  />
        </asp:BoundField>

      
        <asp:BoundField  DataField="tableName"   HeaderText="地区名" ControlStyle-CssClass="Boxx" ControlStyle-Width="150px" SortExpression="tableName">
            <ItemStyle HorizontalAlign="Left"  Font-Size="12px" Width="80px"  />
        <ControlStyle CssClass="Boxx" Width="150px"></ControlStyle>

            <HeaderStyle HorizontalAlign="Left" Font-Size="12px"  />
        </asp:BoundField>
        

             <asp:BoundField  DataField="tableType"   HeaderText="地区类型" ControlStyle-CssClass="Boxx" ControlStyle-Width="150px" SortExpression="tableType">
            <ItemStyle HorizontalAlign="Left"  Font-Size="12px" Width="80px"  />
        <ControlStyle CssClass="Boxx" Width="150px"></ControlStyle>

            <HeaderStyle HorizontalAlign="Left" Font-Size="12px"  />
        </asp:BoundField>
        
        </Columns>
           
            <FooterStyle BackColor="LightSteelBlue" />
            <HeaderStyle BackColor="LightSteelBlue" />
            <AlternatingRowStyle BackColor="WhiteSmoke" />
             <PagerStyle HorizontalAlign="Left" />

<RowStyle Height="25px"></RowStyle>
        </asp:GridView>
       <!--底部功能栏-->

<table id="table_id"  runat="server" width="99%" border="0" align="center"  cellpadding="0" cellspacing="0" style="border-top:1px solid #A3B2CC;">
  <tr>
    <td height="30" width="28%"> <asp:Button ID="Button2" runat="server"  CssClass="Btt" Text="确定所选项" OnClick="Button3_Click"  />
    </td>
      </tr>
</table>
    
    </div>
    </form>
 
<%--         <script language="javascript" type="text/javascript">
             $(function () {
                 $("input").autocomplete({
                     source: [strArr],
                     change: function (event, ui) {
                         // ui.item is undefined :( where is the problem?
                         alert("2");
                     }
                 });

             });

    </script>--%>

</body>
</html>
strArr是个数组 你可以在前台写一个死的替换掉 也可以在后台动态输入数据库的
后台调用
  string str = "";
        for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
        {

            strArr[i] = ds.Tables[0].Rows[i][0].ToString();

            str += "'" + strArr[i] + "',";

        }
        str = str.Substring(0, str.Length - 1);
        ClientScript.RegisterArrayDeclaration("strArr", str);
这样传到前台 最好是写在load事件中。 


                

        

    

  



    



                



	

		

			

				
					
Pega—System Architect

				
			

			

				

					weixin_43869224的博客
				

				

					03-29
					
					628
					
				

			

		

		

			
				
系统架构

			
		

	



                

            
              



	

		

			

				
					
Activiti 工作流表单设计及开发

				
			

			

				

					wyloveice的专栏
				

				

					06-20
					
					7628
					
				

			

		

		

			
				
一、前言


        Activiti 5对表单的支持目前还是比较弱的，表现在对表单的开发还需要写Freemark模板，并且它的模板还需要跟class文件一起打包发布。这使得流程的表单设计必须由开发人员来开发处理。因而，开发一套易用性强的流程表单功能就显得很有必要。



二、需求


        用户一般都希望能有如Microsoft的Office套件中的Info

			
		

	



              


  
              

                


	

		

			

				
					
省市级联表格(不是下拉列表级联啊

				
			

			

				

					11-05
				

			

		

		

			
				
非动态省市级联表单。从数据库查询封装成父 List集合。子类键值对String 父类标识。 Map<String,List>。
页面遍历。根据key 取值，循环tr。

			
		

	





	

		

			

				
					
表格内级联加载数据

				
			

			

				

					lele903的博客
				

				

					11-03
					
					326
					
				

			

		

		

			
				
请参考示例：
http://www.miniui.com/demo/#src=datagrid/celllinkedit.html







 function OnCellBeginEdit(e) {        
            var grid = e.sender;
            var record = e.record;
            var f

			
		

	



		

			
		



	

		

			

				
					
级联数据系统的测试

				
			

			

				

					天谈的专栏
				

				

					01-11
					
					1042
					
				

			

		

		

			
				
场景：一个多节级联系统，

			
		

	





	

		

			

				
					
一个测试下拉菜单很好的用例

				
			

			

				

					09-15
				

			

		

		

			
				
一个测试下拉菜单很好的用例，很适合新手，归纳的很好

			
		

	





	

		

			

				
					
hive：级联报表查询

				
			

			

				

					琦彦
				

				

					09-28
					
					6352
					
				

			

		

		

			
				
级联报表查询

假如，有如下数据（文件名：accumulate.dat）：


A,2015-01,5
A,2015-01,15
B,2015-01,5
A,2015-01,8
B,2015-01,25
A,2015-01,5
C,2015-01,10
C,2015-01,20
A,2015-02,4
A,2015-02,6
C,2015-02,30
C,2015-02,10
B,2015-02,...

			
		

	





	

		

			

				
					
代码重构之道：优化EasyUI级联下拉列表的5个步骤

				
			

			

				

					
				

			

		

		

			
				
本文深入探讨了EasyUI级联下拉列表的重构过程，首先分析了其当前存在的问题和性能瓶颈，接着介绍了为重构所做的环境搭建和工具准备。文中详细阐述了重构过程中的五个关键步骤，包括代码的模块化分离、性能优化、用户...

			
		

	





	

		

			

				
					
easyuidemo: 展示CRUD及级联操作与echarts的Java Web应用示例

				
			

			

				

					
				

			

		

		

			
				
在Web开发中，级联下拉列表是一个常见用例，当用户选择了一个列表项时，另一个列表会根据第一个列表的选择动态更新。这种级联效果可以通过JavaScript和后端数据库查询来实现。  知识点四：DataGrid组件 DataGrid组件...

			
		

	





	

		

			

				
					
Axure8实现左侧动态菜单的几种方法

					
热门推荐

				
			

			

				

					sinat_38715103的博客
				

				

					06-12
					
					1万+
					
				

			

		

		

			
				
以下实现的教程采用Ant design的界面模版进行分步说明，左侧动态菜单的实现方法关键在于怎么实现交互而不是设计规范，这里推荐大家在团队协作过程中使用规范的设计框架，网上有很多，可以自己找。特别是后台产品的设计开发，有助于快速输出产品，把原型转变为html这个过程的沟通时间和开发时间可以大大减少，所以我在这篇教程中也是怎么方便怎么来。



首先我们要知道需要做什么，做成什么效果，通常我们...

			
		

	





	

		

			

				
					
多级联动下拉选择框，动态获取下一级

				
			

			

				

					01-05
				

			

		

		

			
				
多级联动下拉选择框，动态获取下一级，每一级数据为XML，可支持无限级（浏览器端需要Microsoft.XMLDOM支持）

项目需要，一个材料类别表，三级，总共有7000多条记录，如果一次获取会很慢的，所以就是用了动态读取，每次就读一级，且服务器端使用了缓存，效率还不错。



			
		

	





	

		

			

				
					
JavaScript小案例：级联列表.html

				
			

			

				

					05-26
				

			

		

		

			
				
1. 什么是级联列表？
2. 级联列表有什么用？
3. 怎么实现相应的操作？
4. 两种方法实现对应省市的下拉操作
一、什么是级联？

1.级联还指用来设计一对多关系。举个例子：一个表存放学生的信息:表A（姓名，性别，年龄），姓名为主键。还有一张表存放学生的班级信息:表B（姓名，班级）。他们通过姓名来级联。级联的操作有级联更新，级联删除。
二、级联相应的操作

在启用一个级联更新选项后，就可在存在相匹配的外键值的前提下更改一个主键值。系统会相应地更新所有匹配的外键值。如果在表A中将姓名为王五的记录改为李四，那么表B中的姓名为王五的所有记录也会随着改为李四。级联删除与更新相类似。如果在表A中将姓名为王五的记录删除，那么表B中的姓名为王五的所有记录也将删除。
————————————————
版权声明：本文为优快云博主「爱笑的陈sir」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/qq_62259825/article/details/124613029

			
		

	





	

		

			

				
					
测试三级联动

				
			

			

				

					04-27
				

			

		

		

			
				
不需要访问后台服务器端，不使用Ajax，无刷新，纯JS实现的省市区三级联动。

当省市区数据变动是只需调正js即可。

			
		

	





	

		

			

				
					
通用功能公共测试用例

				
			

			

				

					04-11
				

			

		

		

			
				
通用功能公共测试用例

			
		

	





	

		

			

				
					
扬州NSYH级联表格

				
			

			

				

					m0_60569070的博客
				

				

					07-29
					
					211
					
				

			

		

		

			
				
左侧树形结构对应右侧级联表格

			
		

	





	

		

			

				
					
vue3中，el-table级联表格——default-expand-all & row-key & show-overflow-tooltip & 树状表格计算总价合计总计

					
最新发布

				
			

			

				

					weixin_44867717的博客
				

				

					05-15
					
					587
					
				

			

		

		

			
				
【代码】vue3中，el-table级联表格——default-expand-all & row-key & show-overflow-tooltip & 树状表格计算总价合计总计。

			
		

	





	

		

			

				
					
hibernate 级联的测试.比较初级,希望对大家有帮助

				
			

			

				

					fynshmily的博客
				

				

					08-05
					
					140
					
				

			

		

		

			
				
这个是我做的用例。测试cascade和inverse.分析结果以及具体hibernate sql都在，比较容易看明白。
希望不是很明白的看看，加深印象。
小弟学识浅薄，如果有不对的地方，请指出来，谢谢！~
测试环境：Eclispe，用断点测试。
          数据库是SQLServer2000.

Area.hbm.xml





 



 



...

			
		

	





	

		

			

				
					
excel-二级联动下拉框案例

				
			

			

				

					weixin_41668007的博客
				

				

					04-21
					
					1277
					
				

			

		

		

			
				
①Ctrl+g 定位条件-常量 ，在弹出的定位条件页面里，点击【常量】，然后点击【确定】即可。



②定位完成后我们点击主菜单栏里【公式】，然后点击【根据所选内容创建】，在弹出的对话框里勾选【首行】点击【确定】即可



③此时我们点击【名称管理器】，就可以在名称管理器中查阅到我们分类好的数据了



④数据分类好后，鼠标放到A2



⑤数据验证，表示A2单元格有A1,B1,C1三项选择

⑥...

			
		

	





	

		

			

				
					
手把手教你实现一个Vue无限级联树形表格（增删改）

				
			

			

				

					主要领域：前端开发
				

				

					12-01
					
					3001
					
				

			

		

		

			
				
前言
平时我们可能在做项目时，会遇到一个业务逻辑。实现一个无限级联树形表格，什么叫做无限级联树形表格呢？就是下图所展示的内容，有一个祖元素，然后下面可能有很多子孙元素，你可以实现添加、编辑、删除这样几个功能。

资源

JavaScript框架：vue.js
UI框架：Element UI

源码
这里需要重点说明的是，主要使用了递归的算法以及给数据标识的重要性。详细说明可以在源码中查看注释，也可以通过删改代码融会贯通。
<template>
    <div class="contain

			
		

	





	

		

			

				
					
实现AJAX_Servlet级联下拉列表的简易教程

				
			

			

				

					
				

			

		

		

			
				
AJAX_Servlet级联下拉列表涉及的技术知识点主要集中在Web开发中动态内容更新和数据交互方面的技术应用。具体来说，这一知识点涵盖的范围包括：  1. AJAX技术：AJAX（Asynchronous JavaScript and XML）是一种在无需...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值