笔记： 关于art.dialog，实现复选-程序员宅基地

1.思路，由于工作需求，需利用jquery ,art.dialog组件实现弹框复选，编辑绑定功能（mvc）；故做笔记；

视图部分代码 ；foreach遍历数据源；

    <td colspan="7">                   
                             <img alt="点击选择" src="@Url.Content("~/Content/themes/base/images/find.gif")" οnclick="btnSch()" />
                            <input id="JobNameJS" name="JobNameJS" value="" style="border:0;width:80%" readonly unselectable="on" />
                            @foreach (var item in jobsch)
                            {
                                for (int i = 0; i < arry.Count(); i++)
                                {
                                    if (Convert.ToInt32(arry[i]) == item.Id)
                                    {
                                        <input id="JobScheduleName" name="JobScheduleName" value="@item.JobScheduleName" style="border:0;" readonly unselectable="on" type="hidden" />                                                              
                                    }                                   
                               }
                            }                          
                            <input id="JobScheduleId" name="JobScheduleId" value="@Model.JobScheduleId" type="hidden" />
                        </td>

脚本代码，页面加载完成后，获取name为JobScheduleName的值，并遍历添加到数组中，替换到id为JobNameJS的input中；这样做的原因是因为显示的值在数据库是按条存储的，并且工程进度表与项目表关系是将进度表id以字符串形式存储到项目表中的，所以需要遍历。

  function btnSch()
    {
       var abc = $("#JobScheduleId").val();       
       var ac = $("#JobNameJS").val();
       art.dialog.data('Id', abc);
       art.dialog.data('JobSchName', ac);
        url = "/Item/JobScheduleList";
        art.dialog.open(url, {
            id:"btndig",
            title: '选择工程进度',
            width: 800,
            height: 500,
            left: '50%',
            top: '50%',
            esc: true,
            lock: true,
            resize: false,
            show: true,
            drag: false,
            ok: function () {
                if (art.dialog.data('JobSchName') != undefined)
                {
                    $("#JobNameJS").val(art.dialog.data('JobSchName'));
                    $("#JobScheduleId").val(art.dialog.data('Id'));
                    var a = art.dialog.data('JobSchName');
                    var b = art.dialog.data('Id');
                }
                
            }
        })
    }
    $(function () {
        var JobName = [];
        var JobNameList = $("input[name='JobScheduleName']").each(function () {
            var a = $(this).val();
            JobName.push(a);
        })   
        $("#JobNameJS").val(JobName);
    })

3.子页面，试图代码

         @Html.CheckBox("expert", false, new { id = item.Id, value = item.JobScheduleName })

js脚本，加载事件是为了将数据库的值从新绑定checkbox从而实现添加或者取消chebox，并且可以根据实际情况选择选中的最大个数

    Ids = new Array();
    ExpertNames = new Array();
    var checkCount = 0;
    //绑定
    $(function () {
        var ids = art.dialog.data('Id');
        var names = art.dialog.data('JobSchName');
        if (ids != undefined && ids != 0) {
            var idArray = ids.split(',');
            if (idArray[0] == "" && idArray.length == 1) {
                checkCount = 0;
            } else {
                checkCount = idArray.length;
            }
            var namesArray = names.split(',');
            $.each(idArray, function (index, value) {
                $("input[type=checkbox][id='" + value + "']").prop("checked", true);
                Ids.push(value);
                ExpertNames.push(namesArray[index]);
            })
        }
    })
    //取消选中
    $("input:checkbox").click(function () {
        var checkId = $(this).attr("Id");
        //取消选中
        if ($(this).prop("checked") == false) {
            checkCount = checkCount - 1;
            for (var i = 0; i < Ids.length; i++) {
                if (Ids[i] == $(this).attr("id") && ExpertNames[i] == $(this).val()) {
                    Ids[i].slice();
                    ExpertNames[i].slice();
                }
            }

        }
            //选中
        else {
            checkCount = checkCount + 1;
            if (checkCount > 10) {
                alert("最多只能选择10个！");
                checkCount = checkCount - 1;
                $("#" + checkId).removeAttr("checked");
                var id = $(this).prop('id');
                var name = $(this).prop('value');
                Ids.push(id);
                ExpertNames.push(name);

            }
        }
        //设置最大选中个数
        if (checkCount <= 10) {
            var id = $(this).prop('id');
            var name = $(this).prop('value');
            if ($(this).prop('checked') == true) {
                Ids.push(id);
                ExpertNames.push(name);
            } else {
                Ids.splice($.inArray(id, Ids), 1);
                ExpertNames.splice($.inArray(name, ExpertNames), 1);
            }
            art.dialog.data('Id', Ids.join());
            art.dialog.data('JobSchName', ExpertNames.join());
        }

    });

 每天记一点，就是进步。