动态生成矩阵选择器,选择面板
来源:互联网 发布:琵琶 知乎 编辑:程序博客网 时间:2024/05/16 15:59
根据数据库中的数据量的大小动态生成矩阵布局的选择器,我称之为“选择面板”,在网络上查了很多资料,但是没有一个是符合我的要求的。终于在同伴们和自己的参悟下,把布局给设计出来,后来奋力学习JQuery的脚本使用,才最后修成正果!
以下是具体的实现代码:
1.js脚本:
2.html面板选择器代码:
以下是具体的实现代码:
1.js脚本:
<script type="text/javascript">$(document).ready(function(){//1.当选择文本框的文本内容改变的时候触发的事件$("#culture").change(function(){var $time1 = $("#ol-reg-il-beginTime").val();var $time2 = $("#ol-reg-il-endTime").val();var $endDate = $("#culture").val();window.location.href="/box/boxPrice?t1="+$time1+"&t2="+$time2+"&nDate="+$endDate;});//2.当点击查询价格按钮触发$("#showPricesAnalysis").click(function(){var $checkboxs = $("input[type=checkbox]:checked"); var date = $("#culture").val();var tables = "";var length; $checkboxs.each(function(index,domEle){ //获取多个选中的值,传递到后台查询,并转发到另一个页面 tables=tables+domEle.value+","; }); length=$checkboxs.length; $("#data").attr("value",tables); $("#execDate").attr("value",date);});// 行列选择事件$("a[id^='0_']").bind("click",function(){var $checkboxs = $("input[name=items]");var id = $(this).attr("id");var arra = id.split("_");var se = arra[1];$("input[name='items'][id$='_"+se+"']").attr("checked","checked");var $colSel = $("input[name='items'][id$='_"+se+"']");$(this).bind("click",function(){if($colSel.attr("checked")){$colSel.removeAttr("checked");}else{$colSel.attr("checked","checked");}});});$("a[id$='_0']").bind("click",function(){var $checkboxs = $("input[name=items]");var id = $(this).attr("id");var arra = id.split("_");var se = arra[0];$("input[name='items'][id^='"+se+"_']").attr("checked","checked"); var $rowSel = $("input[name='items'][id^='"+se+"_']");$(this).bind("click",function(){if($rowSel.attr("checked")){$rowSel.removeAttr("checked");}else{$rowSel.attr("checked","checked");}});});//全选和取消全选事件 $("a[id='0_0']").bind("click",function(){ var $checkboxs = $("input[name=items]"); $checkboxs.attr("checked","checked"); $(this).bind("click",function(){ if($checkboxs.attr("checked")){ $checkboxs.removeAttr("checked"); }else{ $checkboxs.attr("checked","checked"); } }); });});</script>
2.html面板选择器代码:
说明一下(kList是从数据库中动态读取的数据,类型是List<String> , 但是因为才每次动态读取之前,我都先往kList列表中加入了一个String "All" 为了占位的。)
<form action="/box/boxChart" method="post" id="form1"><input type="hidden" id="data" name="data"><input type="hidden" id="execDate" name="execDate"><!-- 1.顶部时间 --><div id="timediv">请选择执行表:<select name="culture" id="culture" style="width:98px"><c:forEach var="table" varStatus="i" items="${tableList}"><c:if test="${selectDate==table}"><option value="${selectDate}" selected = "selected">${selectDate}</option></c:if><c:if test="${selectDate!=table}"><option value="${table}">${table}</option></c:if></c:forEach></select><input type="submit" id="showPricesAnalysis" value="查询价格" /></div><hr><div id="space" style="width:100%;height:10px;"></div><!--2.panel选择器 --><div id="paneldiv" style="width:100%; height:100%;"><table border="1px" cellpadding="5" cellspacing="0" id="bigtable"><c:forEach var="item" varStatus="status" items="${kList}" ><tr><c:forEach var="k" varStatus="sta" items="${kList}" ><c:if test="${sta.getIndex()<1 or status.getIndex()<1}"><!-- 如果是第一行或者是第一列--> <span style="white-space:pre"></span><c:if test="${sta.getIndex()>=status.getIndex()}"><!-- 第一行n列,不重复列举--> <span style="white-space:pre"></span> <td align="center"><a id="${status.getIndex()}_${sta.getIndex()}">${k}</a></td> </c:if> <c:if test="${sta.getIndex()<status.getIndex()}"><!-- 第一列n行,不重复列举--> <span style="white-space:pre"></span> <td align="center"><a id="${status.getIndex()}_${sta.getIndex()}">${item}</a></td> </c:if></c:if><c:if test="${sta.getIndex()>=1 and status.getIndex()>=1}"><!-- n行n列,重复列举*号--><c:if test="${sta.getIndex()!= status.getIndex()}"> <span style="white-space:pre"></span><td align="center"><input type="checkbox" name="items" id="${status.getIndex()}_${sta.getIndex()}" value="${selectDate}_${item}_${k}" /></td></c:if><c:if test="${sta.getIndex()== status.getIndex()}"> <span style="white-space:pre"></span><td align="center">x</td></c:if></c:if></c:forEach></tr></c:forEach></table> </div></form>
3.效果如图:
1 0
- 动态生成矩阵选择器,选择面板
- 安卓日历面板选择器-选择日期区间
- Swing配置文件生成动态面板和表格
- jQuery属性选择器选择动态变量
- 动态面板
- Android动态生成Selector选择器代码
- 如何动态生成Selector状态选择器
- 如何动态生成Selector状态选择器
- 利用动态数组生成魔方矩阵
- 自定义颜色选择面板
- 动态生成CheckBox由用户选择
- Android开发笔记之代码动态生成图片状态选择器
- 原型图~动态面板
- Axure RP动态面板
- 动态生成juery-easyui下的折叠面板,在谷歌下格式不正确问题
- 用c++动态生成n×n的魔方矩阵
- css 选择器如何选择
- jquery选择器选择select
- cookie 和session 的区别详解
- 洛谷P1541/CODEVS1068 乌龟棋
- Codeforces Round #327 (Div. 2) A. Wizards' Duel(水)
- 约瑟夫
- 8.13 ** (The Location class)
- 动态生成矩阵选择器,选择面板
- iOS之触摸事件和手势
- 调试那些事儿
- 移植BOA到mini2440
- socket网络编程复习笔记(四):认识套接字函数
- 025 Reverse Nodes in k-Group [Leetcode]
- Android 生成图标的有力工具 Android Asset Studio
- Codeforces Round #327 (Div. 2) B. Rebranding (字符串)
- 声明式编程和命令式编程的比较