后端使用thinkphp6框架,查询数据,按照需求封装成前端需要的json数组格式,原始数据如下:
开始处理数据:
public function index(){
$industry = industry(); //行业详情 ,查询出来的数据,如上面的二维数组
$arr = array(); //空数组 用于存储前台需要的数据
foreach($industry as $k=>$v) { //拼接前台需要的数据
$arr[$k]['value'] = $v['t_id'];
$arr[$k]['text'] = $v['t_name'];
}
return view('index',[
'carousel' => carousel(), //轮播图
'industryStr' => urldecode(json_encode($arr)), //行业详情 ,将处理好的数据变成 json 传递,因为这里数组中包含中文,所以需要使用 urldecode() 处理一下
]);
}
处理好的数据如下:
[{"value":1,"text":"\u4e92\u8054\u7f51"},{"value":2,"text":"\u901a\u4fe1"},{"value":3,"text":"\u7535\u5b50"},{"value":4,"text":"\u91d1\u878d"},{"value":5,"text":"\u94f6\u884c"},{"value":6,"text":"\u4fdd\u9669"}]
这里我发现,如果将上面的json数组使用静态方法直接赋值给mui的选择器是可以直接使用的,但是我用动态赋值的方法则不行,不光是不行,连值我都打印不出来,后来我估计应该是数据有问题,导致js都失效了,后来改了一种写法,将得到的数据输出在html页面,然后使用js去拿数据,并使用$.parseJSON( )处理数据:
<!-- html 代码 -->
<div id="industryStr" style="display: none">{$industryStr}</div>
<div class="search-left">
<a href="JavaScript:;" onclick="selecteds()">
<span id="industry">选择行业</span>
<span class="mui-icon mui-icon-arrowdown"></span>
</a>
</div>
//js代码
function selecteds() {
var picker = new mui.PopPicker();
var arr = $("#industryStr").text(); //获取 json
picker.setData($.parseJSON(arr)); //处理 json
picker.show(function (selectItems) {
$("#industry").html(selectItems[0].text);
console.log(selectItems[0].value);
})
}
最终效果: