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());
}
});
每天记一点,就是进步。