layui插件xm-select在pbootcms中的应用
这里的一个应用场景是在pbootcms的内容页，添加一个相关产品，相关页面的勾选按钮。但是我发现这个勾选按钮，需搜索，分页，比较复杂。这里引用xm-select，下面分别是xm-select的代码地址，官方网站及说明文档
https://gitee.com/maplemei/xm-select
https://xm-select.com/
https://xm-select.com/file/xm-select/v1.2.4/#/component/install
1.后台
将xm-select-master文件放入apps\admin\view\default
在apps\admin\view\default\common\head.html引用xm-select
1
| <script type="text/javascript" src="{APP_THEME_DIR}/xm-select-master/dist/xm-select.js"></script>
|
apps\admin\view\default\content\content.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <div class="layui-form-item">
<label class="layui-form-label">相关产品</label>
<div class="layui-input-block" style="z-index: 1000;">
<div id="demo4" class="xm-select-demo"></div>
<script>
var demo4 = xmSelect.render({
el: '#demo4',
paging: true,
pageSize: 6,
filterable: true,
pageEmptyShow: false,
data: [
{php}
if (isset($this->vars['products']) && is_array($this->vars['products'])) {
foreach ($this->vars['products'] as $product) {
echo '{"name":"'.$product->title.'","value":'.$product->id.(in_array($product->id,$this->vars['relate_product']) ? ',"selected": true' : '').'},';
}
}
{/php}
],
on: function(data){
if(data.arr.length > 0) {
console.log('已选择产品ID:', data.arr);
var ids = data.arr.map(item => item.value).join(',');
console.log(ids);
document.getElementById('selectedProducts').value = ids;
} else {
console.log('未选择任何产品');
document.getElementById('selectedProducts').value = '';
layer.msg('请至少选择一个产品');
}
}
})
</script>
</div>
</div>
|
apps\admin\controller\content\ContentController.php
mod()这个方法下
- 找到这块代码
1
2
3
| $gid = post('gid', 'int') ?: 0;
$gtype = post('gtype', 'int') ?: 4;
$gnote = post('gnote');
|
添加下面代码
1
| $productIds = post('product_ids');
|
同时，在ay_content表中添加‘relate_product’字段
构建数据也需要添加’relate_product’=>$productIds,如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
$data = array(
'scode' => $scode,
'subscode' => $subscode,
'title' => $title,
'titlecolor' => $titlecolor,
'subtitle' => $subtitle,
'filename' => $filename,
'author' => $author,
'source' => $source,
'outlink' => $outlink,
'date' => $date,
'ico' => $ico,
'pics' => $pics,
'picstitle' => $picstitle,
'content' => $content,
'tags' => $tags,
'enclosure' => $enclosure,
'keywords' => $keywords,
'description' => clear_html_blank($description),
'status' => $status,
'istop' => $istop,
'isrecommend' => $isrecommend,
'isheadline' => $isheadline,
'gid' => $gid,
'gtype' => $gtype,
'gnote' => $gnote,
'relate_product'=>$productIds,
'update_user' => session('username')
);
|
找到这块代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$this->assign('mod', true);
if (! $result = $this->model->getContent($id)) {
error('编辑的内容已经不存在！', - 1);
}
$this->assign('content', $result);
if (! $mcode = get('mcode', 'var')) {
error('传递的模型编码参数有误，请核对后重试！');
}
$sort_model = model('admin.content.ContentSort');
$sort_select = $sort_model->getListSelect($mcode);
|
添加下面代码
1
2
3
4
5
6
7
8
9
10
|
$_GET['pagesize'] = 500;
$products = $this->model->getList($mcode);
if (is_object($products)) {
$products = json_decode(json_encode($products), true);
}
$this->assign('relate_product', explode(',', $result->relate_product));
$this->assign('products', $products);
|
2.前台
apps\home\controller\ParserController.php找到这个函数
1
2
3
4
|
protected function parserContent($label, $search, $content, $data, $params, $sort){
}
|
直接新增一个代码判断分支
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| case 'relateproduct':
if ($data->type!= 2)
break;
if (! ! $relate = $this->model->getRelateProduct($data->id)) {
$html = [];
foreach ($relate as $product) {
$link = $this->parserLink(
$product->type,
$product->urlname,
'content',
$product->scode,
$product->sortfilename,
$product->id,
$product->filename
);
$html[] = <<<EOF
<div class="product-item">
<a href="{$link}">
<img src="{$product->ico}" alt="{$product->title}">
<h3>{$product->title}</h3>
</a>
</div>
EOF;
}
$content = str_replace($search, implode("\n", $html), $content);
}else {
$content = str_replace($search, '<div class="no-data">No relate Product</div>', $content);
}
break;
|
其中，getRelateProduct函数需要在apps\home\model\ParserModel.php中写一个
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
public function getRelateProduct($id)
{
if (! $this->relate) {
$this->scodes = array();
$field = array(
'a.id',
'a.title',
'a.filename',
'a.ico',
'a.scode',
);
$where = parent::table('ay_content a')->field('a.relate_product')->where("id='$id'")->find();
$productIds = array_map(function($id) {
return "'" . trim($id) . "'";
}, explode(',', $where->relate_product));
$inClause = implode(',', $productIds);
$this->relate = parent::table('ay_content a')->field($field)
->where("id IN ($inClause)")
->where("a.acode='" . get_lg() . "'")
->where('a.status=1')
->order('a.id DESC')
->select();
}
return $this->relate;
}
|
前端用这个标签{content:relateproduct}调用就可以了
