• checkbox选择根据后台List数据进行回显


    需求:记住用户已经选择的 checkbox 选项,当用户再次对该 checkbox 进行选择操作时,应对该用户已经选择的 checkbox 选项进行选中操作。

    示例代码:

    1.  
    2.  
    3. checkbox,js遍历后台list
    4.  
    5. $("#merchantSubclass").show();
    6. var j = 0;
    7. var merchantCategoryList = "${merchantCategoryList}";
    8. var merchantCategoryListTh = "${fn:length(merchantCategoryList)}";
    9.  
    10. var array = new Array();
    11. <c:forEach items="${merchantCategoryList}" var="item">
    12. array.push("${item}");
    13. </c:forEach>
    14.  
    15. for (var i = 0; i < data.length; i++) {
    16. var checked="";
    17. for(var k=0;k<array.length;k++){
    18. if(data[i].id==array[k]) {
    19. checked="checked='checked'";
    20. }
    21. }
    22. $("#merchantTypeSubclass").append("<div class='merchantTxt' style='140px;float: left;'>"+
    23. "<input type='checkbox' name='merchantTypes' value='"+data[i].id+"' "
    24. +checked+" class='merchantTypes'>"+
    25. data[i].typeName+"  </div>");
    26. j++;
    27. if(j==5){
    28. $("#merchantTypeSubclass").append("<span class='merchantTxt'><br/></span>");
    29. j=0;
    30. }
    31. }
    32.  
    33.  
    34.  

    图解:


    难点:js 中无法遍历 List 集合,所以只能先把数组转换到 Array 数组,再进行循环遍历。 

    js 遍历 List 会有这样的问题:

    1.  
    2.  
    3. <script type="text/javascript" language="javascript">
    4. <!--
    5.  
    6. //后台servlet中已经向request中set了一个List集合对象,名为mulst
    7.  
    8. //在js中使用fn标签和EL表达式获得mulst List集合对象的长度
    9. var mulength = '${fn:length(mulst)}';
    10.  
    11. //遍历节点数组
    12. for(var i = 0;i<mulength;i++)
    13. {
    14. alert('${mulst[i]}');//在这发生了问题,我想在js中要循环取出List中的集合中的数据,但是这样取不出来
    15.  
    16. //如果使用alert('${mulst[0]}');//这样可以获得List中第一条数据.
    17. }
    18. //-->
    19. </script>
    20. <script>
    21. <c:forEach var="obj" items="${mulst} ">
    22. alert("${obj.属性}");
    23. </c:forEach>
    24. </script>
    25.  
    26.  


    参考文章:

    http://blog.csdn.net/XiaoKanZheShiJie/article/details/47280449

    http://www.cnblogs.com/libingql/archive/2011/11/07/2238663.html

  • 相关阅读:
    codevs1004 四子连棋
    codevs1009 产生数
    NOIP2014 寻找道路
    Tyvj1139 向远方奔跑(APIO 2009 抢掠计划)
    随机算法
    线性基
    线性基入门
    线性基 + 并查集
    欧拉公式 (平面)
    卡特兰数 + 大数
  • 原文地址:https://www.cnblogs.com/zhuyeshen/p/11419421.html
Copyright © 2020-2023  润新知