请选择 进入手机版 | 继续访问电脑版

程序人生

 找回密码
 注册

QQ登录

只需一步,快速开始

程序人生 门户 前端程序员 JQuery 查看内容

jquery控制左右列表项的双向选取与移除代码

2016-10-12 15:48| 发布者: sean| 查看: 360| 评论: 0

摘要: 项目需要做一个业务跟进人的选取层,主要功能是点开选取业务人时,弹出div层,加载所有的人员清单,从中选取指定的人到右边的列表框显示界面如下这里使用了牛逼的knockout js进行建模,然后通过jquery控制checkbox的 ...
项目需要做一个业务跟进人的选取层,主要功能是点开选取业务人时,弹出div层,加载所有的人员清单,从中选取指定的人到右边的列表框
显示界面如下

这里使用了牛逼的knockout js进行建模,然后通过jquery控制checkbox的选取动作事件进行添加与移除
HTML代码为
   <table class="table table-striped table-bordered">
                <tr>
                    <td style="vertical-align: top;">
                        <input type="text" style="width: 100px;" id="txtStaffName" />&nbsp;&nbsp;
                                                    <button class="btn btn-primary" style="margin-top: -10px;" data-bind="click: GetTravelStaff">查询</button>
                        <div id="staffDiv" data-bind="foreach: StaffList" style="margin-left: 30px;">
                            <div>
                                <input type="checkbox" onclick="CheckLiaison(this)" data-bind="    value: StaffId" /><span data-bind="    text: StaffName"></span>
                            </div>
                        </div>
                    </td>
                    <td style="vertical-align: top;">
                        <div data-bind="foreach: LiaisonList" style="margin-left: 30px;">
                            <div>
                                <span data-bind="text: StaffName"></span>
                                <span data-bind="text: MobileNumber"></span>
                                <input type="text" data-bind="value: AreaRemark" maxlength="50" placeholder="请填写负责区域" />
                                <button type="button" class="btn btn-mini btn-danger" style="margin-top: -10px;" data-bind="click: $root.DelLiaison"><i class="icon-remove"></i></button>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
jquery控制checkbox和移除按钮进行选取与删除
=====选取事件添加到右边已选择列表框=========
function CheckLiaison(obj) {
    if (obj.checked == true) {
        $.each(model.StaffList(), function (i, eo) {
            if (eo.StaffId == obj.value) {
                var objj = new Object();
                objj.staffId = obj.value;
                objj.StaffName = eo.StaffName;
                objj.MobileNumber = eo.MobileNumber;
                objj.AreaRemark = eo.AreaRemark;
                model.LiaisonList.push(objj);
                return;
            }
        });
    } else {
        $.each(model.LiaisonList(), function (i, eo) {
            if (eo.staffId == obj.value) {
                model.LiaisonList.remove(eo);
                return;
            }
        });
    }
};
====选取后的删除功能=========
  self.DelLiaison = function (o) {
        self.LiaisonList.remove(o);
        $.each(self.StaffList(), function (i, obj) {
            if (obj.StaffId == o.staffId)
                $("#staffDiv").find("input:checkbox[value='" + o.staffId + "']").attr("checked", false);
        });
    }

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

相关分类


关于程序人生网|小黑屋|手机版|Archiver|

程序人生 | QQ

粤公网安备 44040202000007号

( 粤ICP备13038131号-5 )

返回顶部