select2 ajax动态获取数据并回显前端

【select2 ajax动态获取数据并回显】有这样一个需求：给员工分配角色，首先要获得这个员工已拥有的角色，并且要获得所有的角色列表。
具体效果如下

文章图片

实现步骤：
1.加载所有的角色列表
因为是一个静态弹框，不能每次打开静态框的时候再发送请求加载角色列表，再页面初始化时应加载完成。

/** * 页面初始化 */ $(function () { initRolesSelect(); }function initRolesSelect() { Ctool.ajax.post({ url: '/admin/sys/role/list', success: function (res) { $('#selectRole').select2({ theme: "bootstrap", multiple: true, //开启多选 data: res.data,//返回的数据 minimumResultsForSearch: -1 //禁止搜索}); } }) }

根据官方文档只要返回的格式为

{ "results": [ { "id": 1, "text": "Option 1" }, { "id": 2, "text": "Option 2", "selected": true }, { "id": 3, "text": "Option 3", "disabled": true } ] }

这种格式的select2会自动渲染。selected 表示加载时是否被选中，disabled表示不可编辑。当然也可以自定义模板。因为需要在页面初始化时就加载角色列表，因此不能返回该员工已拥有的角色。定义的返回格式为：

console.log(res.data) //后端返回的数据(4) [{…}, {…}, {…}, {…}] 0: {id: 1, text: "系统管理员"} 1: {id: 4, text: "员工"} 2: {id: 5, text: "老板"} 3: {id: 7, text: "码农"} length: 4

2.通过人员id查找已拥有的角色并进行回显

//回显数据 function echoSelect2(dom,value){ $.each(value,function(index,value){ $(dom).append(new Option(value.name, value.id, false, true)); }); $(dom).trigger("change"); }原文：https://blog.csdn.net/u011067966/article/details/79154391

通过这种方式进行回显的话会创建一个新的option进行回显,但下拉列表同时也就多了新的option。

文章图片

最后查阅官方文档：$('#selectRole').val(['1', '2']); $('#selectRole').trigger('change'); 通过传入数组下表通过chang事件监听可以实现回显。

/** * 分配角色回显 * @param id */ function allotRoleBtn(id) { $('#selectRole').val(null).trigger('change'); //加载静态框时先清空。 if (id) { Ctool.ajax.post({ url: '/admin/sys/user/allotsearch', data: {id: id}, success: function (res) { $('#allotRoleModal').modal('show'); //打开静态框 $('#allotRoleFrom').setForm(res.data.user); //对用户名和昵称进行回显var role = res.data.role; //获取到该员工拥有的角色 var roles = []; //定义一个空数组用来存放角色idif (role != "") { $.each(role, function (index, role) {roles.push(role.id); }); $('#selectRole').val(roles); $('#selectRole').trigger("change"); }}}); } }