EasyUI combobox下拉多选框的实现

combobox实现下拉列表多选， 效果如下

aaarticlea/png;base64,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" alt="" />

一、先定义一个easyui-combobox

<td>

     目标人群:

</td>

<td>

     <input id="cmbAgeType" class="easyui-combobox" name="dept" />

</td>

二、在javascript中写入如下代码

   $('#cmbAgeType').combobox({

                url: 'AjaxHandler/RadioCommon.ashx?action=bindAgeType',//对应的ashx页面的数据源

                method: 'get',

                valueField: 'CID',//绑定字段ID

                textField: 'CNAME',绑定字段Name

                panelHeight: 'auto',//自适应

                multiple: true,

                formatter: function (row) {

                    var opts = $(this).combobox('options');

                    return '<input type="checkbox" class="combobox-checkbox" id="' + row[opts.valueField] + '">' + row[opts.textField]

                },

                onShowPanel: function () {

                    var opts = $(this).combobox('options');

                    var target = this;

                    var values = $(target).combobox('getValues');

                    $.map(values, function (value) {

                        var el = opts.finder.getEl(target, value);

                        el.find('input.combobox-checkbox')._propAttr('checked', true);

                    })

                },

                onLoadSuccess: function () {

                    var opts = $(this).combobox('options');

                    var target = this;

                    var values = $(target).combobox('getValues');

                    $.map(values, function (value) {

                        var el = opts.finder.getEl(target, value);

                        el.find('input.combobox-checkbox')._propAttr('checked', true);

                    })

                },

                onSelect: function (row) {

                    var opts = $(this).combobox('options');

                    var el = opts.finder.getEl(this, row[opts.valueField]);

                    el.find('input.combobox-checkbox')._propAttr('checked', true);

                },

                onUnselect: function (row) {

                    var opts = $(this).combobox('options');

                    var el = opts.finder.getEl(this, row[opts.valueField]);

                    el.find('input.combobox-checkbox')._propAttr('checked', false);

                }

            });

三、后台传到前台的Json格式

[{"CID":,"CNAME":"10岁以上","CSEX":,"CAGE":,"CEDUCATION":,"CINCOMING":,"CMARRY":,"CJOB":,"CDECIDER":,"CBACKUP1":,"CBACKUP2":,"CBACKUP3":,"CARG1":"","CARG2":"","CARG3":"","CVALID":,"CTX3":""},{"CID":,"CNAME":"男","CSEX":,"CAGE":,"CEDUCATION":,"CINCOMING":,"CMARRY":,"CJOB":,"CDECIDER":,"CBACKUP1":,"CBACKUP2":,"CBACKUP3":,"CARG1":"","CARG2":"","CARG3":"","CVALID":,"CTX3":""},{"CID":,"CNAME":"女","CSEX":,"CAGE":,"CEDUCATION":,"CINCOMING":,"CMARRY":,"CJOB":,"CDECIDER":,"CBACKUP1":,"CBACKUP2":,"CBACKUP3":,"CARG1":"","CARG2":"","CARG3":"","CVALID":,"CTX3":""},{"CID":,"CNAME":"10-19岁","CSEX":,"CAGE":,"CEDUCATION":,"CINCOMING":,"CMARRY":,"CJOB":,"CDECIDER":,"CBACKUP1":,"CBACKUP2":,"CBACKUP3":,"CARG1":"","CARG2":"","CARG3":"","CVALID":,"CTX3":""},{"CID":,"CNAME":"20-29岁","CSEX":,"CAGE":,"CEDUCATION":,"CINCOMING":,"CMARRY":,"CJOB":,"CDECIDER":,"CBACKUP1":,"CBACKUP2":,"CBACKUP3":,"CARG1":"","CARG2":"","CARG3":"","CVALID":,"CTX3":""},{"CID":,"CNAME":"30-39岁","CSEX":,"CAGE":,"CEDUCATION":,"CINCOMING":,"CMARRY":,"CJOB":,"CDECIDER":,"CBACKUP1":,"CBACKUP2":,"CBACKUP3":,"CARG1":"","CARG2":"","CARG3":"","CVALID":,"CTX3":""},{"CID":,"CNAME":"40-49岁","CSEX":,"CAGE":,"CEDUCATION":,"CINCOMING":,"CMARRY":,"CJOB":,"CDECIDER":,"CBACKUP1":,"CBACKUP2":,"CBACKUP3":,"CARG1":"","CARG2":"","CARG3":"","CVALID":,"CTX3":""},{"CID":,"CNAME":"50岁以上","CSEX":,"CAGE":,"CEDUCATION":,"CINCOMING":,"CMARRY":,"CJOB":,"CDECIDER":,"CBACKUP1":,"CBACKUP2":,"CBACKUP3":,"CARG1":"","CARG2":"","CARG3":"","CVALID":,"CTX3":""}]