笔记: 关于art.dialog,实现复选
1.思路,由于工作需求,需利用jquery ,art.dialog组件实现弹框复选,编辑绑定功能(mvc);故做笔记;
视图部分代码 ;foreach遍历数据源;
<td colspan="7"> <img alt="点击选择" src="@Url.Content("~/Content/themes/base/images/find.gif")" onclick="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()); } });
每天记一点,就是进步。
子非鱼,焉知鱼之乐