Java獲取后台數據，動態生成多行多列復選框

本例目標：

獲取后台數據集合，將集合的某個字段，比如：姓名，以復選框形式顯示在HTML頁面

 

應用場景：

獲取數據庫的人員姓名，將其顯示在頁面，供多項選擇

 

效果如下：

 

 

一、后台

查詢數據庫，返回List集合形式給頁面

 

二、HTML

設置一個div，里面動態加載人員姓名

<div id="result" style="background-color:#FFE4B5; width:300px; ">
                    
</div>

 

 

三、JS

（1）dealData(result)中的這個result，是后台返回的 查詢數據庫得到的 所有人員的 List集合數據，
（2）遍歷這個List集合，result[i].Name就是集合里的姓名字段，將其動態加載到頁面
（3）使用div的append方法，在div里添加復選框
（4）注意：checkbox復選框和label標簽配合使用

function dealData(result){
    for(var i=0; i < result.length; i++ ){
        $("#result").append(
            "<label>" 
                + "<input name='items' type='checkbox' value=" 
                    + result[i].Name
                + ">"
                    + result[i].Name
            +"</label>" + "&nbsp;&nbsp;"
        );
        //每三個進行換行
        if( (i+1) % 3 == 0){
            $("#result").append("<br>");
        }
    }
    
}

 

 成功：

 

四、獲取所有選中的復選框

 

 

Jquery方法：

//獲取選中的所有復選框
var str="";
$("input[name=items]:checkbox:checked").each(function(){
    str = str + $(this).val() + ",";
});

 

五、多列復選框對齊

 

效果如下：

有人的名字是兩個字，有的人名是三個字，

要對齊的話，js方法判斷：如果是兩個字，在名字后加兩個"#nbsp;"空格字符

因為一個漢字等於兩個字符

 

在第三步的JS代碼里添加一個if判斷語句即可：

for(var i=0; i < result.length; i++ ){
    $("#result").append(
        "<label>" 
            + "<input name='items' type='checkbox' value=" 
                + result[i].emplName
            + ">"
                + result[i].emplName
        +"</label>" + "&nbsp;&nbsp;"
    );
    //一個漢字占兩個字符
    if(result[i].emplName.length == 2){
        $("#result").append("&nbsp;&nbsp;");
    }
    
    
    //每三個進行換行
    if( (i+1) % 3 == 0){
        $("#result").append("<br>");
    }
}