C#，.net formwork：下拉框多选，CheckboxSelect

• 前端HTML代码：

<table>
    <tr>
        <td id="selectGroup"></td>
        <td>
            <div>
                <input type="text" id="select_Group" style="display: none;" readonly="readonly" />
            </div>
            <div style="display:none"></div>
        </td>
    </tr>
</table>

• js代码：

引用CheckboxSelect.js

<script src="~/assets/js/CheckboxSelect.js"></script>
<script>
 $.ajax({
    url: '@Url.Action("BBB", "AAAA")',
    type: "POST",
    data: {
        "data": $('#data').val(),
    },
    success: function (data) {
        var jsondata = JSON.parse(data);
        var boxJson = new CheckboxSelectJson("selectGroup", "selecName", jsondata, '210px', '30px');
        setCheckboxOptions("selectGroup", jsondata);//设置下拉选项内容
        boxJson.onChange(function (newV, oldV) {//内容改变事件
            document.getElementById("select_Group").value = newV;
        });
        boxJson.setMaxOptNum(0);//设置最多能选择的选项数（设置为0则不限制）
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert(errorThrown);
    }
 });
</script>

• Controller代码：

 [HttpPost]
 public string BBB(string data)
 {
    DataSet ds = GetDataSet(data);
    string jsonString = DataSetToJson(ds);
    return Server.HtmlDecode(Server.HtmlEncode(jsonString));
 }

 //DataSet轉Json
 private string DataSetToJson(DataSet ds)
 {
    StringBuilder json = new StringBuilder();
    json.Append("{\"Table\":[");
    foreach (DataTable dt in ds.Tables)
    {
        string dtJson = DataTableToJson(dt);
        if (!string.IsNullOrEmpty(dtJson))
        {
            json.Append(dtJson);
            json.Append(",");
         }
    }
    if (json.ToString().EndsWith(","))
        json.Remove(json.Length - 1, 1);
    json.Append("]}");
    return json.ToString();
 }

 //DataTable轉Json
 private string DataTableToJson(DataTable dt)
 {
    StringBuilder json = new StringBuilder();
    if (dt.Rows.Count > 0)
    {
        json.Append("{\"Name\":\"" + dt.TableName + "\",\"Row\":[");
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            json.Append("{");
            for (int j = 0; j < dt.Columns.Count; j++)
            {
                json.Append("\"");
                json.Append(dt.Columns[j].ColumnName);
                json.Append("\":\"");
                json.Append(dt.Rows[i][j].ToString().Replace("\"", "\\\""));
                json.Append("\",");
            }
            json.Remove(json.Length - 1, 1);
            json.Append("},");
        }
        json.Remove(json.Length - 1, 1);
        json.Append("]}");
    }
    return json.ToString();
 }

• 细节解说

CheckboxSelect.js中有CheckboxSelectJson方法可以自定义设置长宽，所以我们需要将datatable转换成json格式传回前端

1、实例的方式调用

var box = new CheckboxSelect("seleid");

box.onChange(function(newV,oldV){//值改变事件

alert("内容改变！\n\t新值："+newV+"\n\t旧值："+oldV);

});

box.disabledTrue();//禁用多选框

box.disabledFalse();//启用多选框

box.resetSelecteds();//清空选项值

box.setValues("000001,000002,000005",",");//赋值

box.setDefaultWord("请选择");//设置未选择值时的缺省字体

box.setRadio(true);//设置控件是否只能单选（true：单选，false：多选）

box.setMaxOptNum(2);//设置最多能选择的选项数（设置为0则不限制）

2、脱离实例的调用

getCheckboxOptionValues("seleid");//获取value值

getCheckboxOptionTexts("seleid");//获取text值

resetCheckboxOptionSelecteds("seleid");//清空选项值

setCheckboxOptionSelecteds("seleid","000001,000002,000005",",");//赋值

setCheckboxOptionRadio("seleid",true);//设置控件是否只能单选（true：单选，false：多选）

setCheckboxOptionMaxOptNum("seleid",1);//设置最多能选择的选项数（设置为0则不限制）

CheckboxSelectDisabledFalse("seleid");//启用多选框

CheckboxSelectDisabledTrue("seleid");//禁用多选框

setCheckboxOptionDefaultWord("seleid","请选择");//设置未选择值时的缺省字体

setCheckboxOptionCheckAll("seleid");//设置全选

CheckboxSelectOnChange("seleid",function(newV,oldV){//值改变事件

alert("内容改变！\n\t新值："+newV+"\n\t旧值："+oldV);

});

var jsondata = {'01':'aaaaa','02':'bbbbb','03':'ccccc','04':'ddddd','05':'eeeee','06':'fffff'};

setCheckboxOptions("seleid",jsondata);//设置下拉选项内容