本文实例讲述了laravel框架lect2多选插件初始化默认选中项操作。分享给大家供大家参考,具体如下:
项目中有大连近郊游发送消息功能,需要能通过搜索,多选用户,来指定发送人。使用 lect2 插件来完成。
lect2 的 html 代码如下:
<div class="form-group" id="member_group"> <label class="col-lg-3 control-label required">选择用户 <span class="required">*</span> </label> <div class="col-lg-4"> <lect class="form-control" name="ur_id[]" id="member_lect" multiple="multiple"></lect> </div></div>
lect2 的 js 代码如下:
//选择用户$("#member_lect").lect2({ ajax: { //请求的url url: "{{ route('member.index') }}", //返回的数据类型 datatype: "json", //延迟时间,毫秒 delay: 500, //是否缓存 cache: true, //查询数据 data: function (params) { //params.term就是你搜索输入的参数 return { arch: params.term, page: params.page || 1 }; }, //请求结果回调函数,data就是后端返回的数据 processresults: function (data, params) { var data = data.data; var results = []; //循环数据,将数据压入results中 //注意数据必须要有二个属性,id和text,分别对应option的value和文本 //网上有些说无法选中元素,请先检查这里,你是否设置了id,并且不为空 $(data.data).each(function (i, obj) { results.push({ id: obj.id, text: obj.name }); }); return { results: results, pagination: { more: (data.current_page * data.per_page) < data.total } }; } }, placeholder: '选择用户', //是否多选 multiple: true, allowclear: true});
后端返回的数据如下,直接使用 laravel 的 paginate() 方法 返回分页数据。
{ "status_code":200, "message":"查询成功", "data":{ "current_page":1, "data":[ { "id":2006, "name":"用户1" }, { "id":2005, "name":"用户3" }, { "id":2004, "name":"用户3" } ], "first_page_url":"http://test.me/member/index?page=1", "from":1, "last_page":1, "last_page_url":"http://test.me/member/index?page=1", "next_page_url":"http://test.me/member/index?page=1", "path":"http://test.me/member/index", "per_page":1, "prev_page_url":null, "to":null, "total":3 }}
在编辑消息时,我们需要查看,这条消息发送给了哪些人,这就需要进入编辑页面时,让 lect2 默认选中用户。
网上说通过如下方法可以选中。
$("#spread_lect").val([1, 2]).trigger("change")梦见很多苍蝇;
但是我们这里lect2的option是通过ajax动态加载的,刚进页面时,lect2的ajax根本没有触发,导致lect2中没有option元素,更无法被选中。
我们通过下面的方式,来实现默认选中。
var lobj = [ {"id": 1, "name": "小徐"}, {"id": 2, "name": "小张"}, {"id": 3, "name": "小明"},];(function initl(lobj) { if (lo反省作文bj) { f我有想法or (var ix = 0; ix < lobj.length; ix++) { var item = lobj[ix]; var option = new option(item.name, item.id, tru东汉皇帝e, true); $("#member_lect").append(option); } $("#member_lect").trigger('change'); }})(lobj);
lobj中的数据,可以通过php后端生成好后,渲染到页面,然后通过json.par()解析成json对象。
本文发布于:2023-04-08 17:01:49,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/145568892b58feb86cfe141f14e24872.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:laravel框架select2多选插件初始化默认选中项操作示例.doc
本文 PDF 下载地址:laravel框架select2多选插件初始化默认选中项操作示例.pdf
留言与评论(共有 0 条评论) |