EasyUI combobox下拉多選框的實現

combobox實現下拉列表多選， 效果如下

一、先定義一個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":1000,"CNAME":"10歲以上","CSEX":0,"CAGE":0,"CEDUCATION":0,"CINCOMING":0,"CMARRY":0,"CJOB":0,"CDECIDER":0,"CBACKUP1":0,"CBACKUP2":0,"CBACKUP3":0,"CARG1":"","CARG2":"","CARG3":"","CVALID":0,"CTX3":""},{"CID":1,"CNAME":"男","CSEX":1,"CAGE":0,"CEDUCATION":0,"CINCOMING":0,"CMARRY":0,"CJOB":0,"CDECIDER":0,"CBACKUP1":0,"CBACKUP2":0,"CBACKUP3":0,"CARG1":"","CARG2":"","CARG3":"","CVALID":1,"CTX3":"1"},{"CID":2,"CNAME":"女","CSEX":2,"CAGE":0,"CEDUCATION":0,"CINCOMING":0,"CMARRY":0,"CJOB":0,"CDECIDER":0,"CBACKUP1":0,"CBACKUP2":0,"CBACKUP3":0,"CARG1":"","CARG2":"","CARG3":"","CVALID":1,"CTX3":"2"},{"CID":1001,"CNAME":"10-19歲","CSEX":0,"CAGE":1,"CEDUCATION":0,"CINCOMING":0,"CMARRY":0,"CJOB":0,"CDECIDER":0,"CBACKUP1":0,"CBACKUP2":0,"CBACKUP3":0,"CARG1":"","CARG2":"10","CARG3":"19","CVALID":1,"CTX3":"1"},{"CID":1002,"CNAME":"20-29歲","CSEX":0,"CAGE":2,"CEDUCATION":0,"CINCOMING":0,"CMARRY":0,"CJOB":0,"CDECIDER":0,"CBACKUP1":0,"CBACKUP2":0,"CBACKUP3":0,"CARG1":"","CARG2":"20","CARG3":"29","CVALID":1,"CTX3":"2"},{"CID":1003,"CNAME":"30-39歲","CSEX":0,"CAGE":3,"CEDUCATION":0,"CINCOMING":0,"CMARRY":0,"CJOB":0,"CDECIDER":0,"CBACKUP1":0,"CBACKUP2":0,"CBACKUP3":0,"CARG1":"","CARG2":"30","CARG3":"39","CVALID":1,"CTX3":"3"},{"CID":1004,"CNAME":"40-49歲","CSEX":0,"CAGE":4,"CEDUCATION":0,"CINCOMING":0,"CMARRY":0,"CJOB":0,"CDECIDER":0,"CBACKUP1":0,"CBACKUP2":0,"CBACKUP3":0,"CARG1":"","CARG2":"40","CARG3":"49","CVALID":1,"CTX3":"4"},{"CID":1005,"CNAME":"50歲以上","CSEX":0,"CAGE":5,"CEDUCATION":0,"CINCOMING":0,"CMARRY":0,"CJOB":0,"CDECIDER":0,"CBACKUP1":0,"CBACKUP2":0,"CBACKUP3":0,"CARG1":"","CARG2":"50","CARG3":"200","CVALID":1,"CTX3":"5"}]