百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

Xm-Select下拉框搜索不存在则创建条目以及动态数据调用

bigegpt 2024-08-10 12:13 10 浏览

今天项目上用到了select的下拉框,需要的功能是 下拉框能输入能多选,

正好在layui的第三方组件找到了xm-select的组件,超级好用,超级推荐,

select的功能基本是发掘到极致!

这里科技小锅盖就是遇到了自己已保存的相关的值和所需类型的值需要在前台渲染上,

遇到的问题,浪费了好一会才解决,这里看看吧!


1、已保存的值和公共的类型组合成一个数组

//行业赛道
$hangye=AuthType::where("")->where("type",2)->select();
foreach ($hangye as $k=>$v){
    $hangye_arr1[]=$v["title"];
}
foreach ($hangye_arr1 as $k=>$v){
    $new1[$k]["value"]=$v;
    $new1[$k]["name"]=$v;
}

$hangye_arr2=explode(",",$list["hangye"]);
foreach ($hangye_arr2 as $k=>$v){
    $new2[$k]["value"]=$v;
    $new2[$k]["name"]=$v;
    $new2[$k]["selected"]=true;
}

// 整体思路就是把已选的和未选的组成一个数组再通过in_array筛选
//(筛选后会出现重复的数组过滤一下就可以)
$new_array=array_merge($new2,$new1);

return json_return("0","success",$new_arr);

//这里一定要看好xm-select所需要的的返回值的参数


2、把组合好的数组再遍历一下,再通过in_array 筛选一下组成新的数组。

(1)、组成的新数组已选的值selected为true的值会有重复用array_unique去除重复的数组。

(2)、去重的数组会有新的键名,再用array_values重新获取一下值就可以。

foreach ($new_array as $k=>$v){
    if(in_array($v["value"], $hangye_arr2))
    {
        $tmp_arr[$k]["value"]=$v["value"];
        $tmp_arr[$k]["name"]=$v["name"];
        $tmp_arr[$k]["selected"]=true;
    }
    else {
        $tmp_arr[$k]["value"]=$v["value"];
        $tmp_arr[$k]["name"]=$v["name"];
        $tmp_arr[$k]["selected"]=false;
    }
}
//二维数组去重并获取去重后value值
$new_arr=array_values(array_unique($tmp_arr, SORT_REGULAR));


3、前端调取xm-select的相关(我这里调用的是)

这里需要调用两个js、 xm-select的就是和axios的js 否则无法远程调取参数


//想创建就必须要开启本地搜索
xmSelect.render({	//...
	filterable: true,
	create: function(val, arr){		
        //返回一个创建成功的对象, val是搜索的数据, arr是搜索后的当前页面数据
		return {
			name: '创建-' + val,
			value: val
		}
	}
})

axios({	method: 'get',	
        url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
}).then(response => {	var res = response.data;
	demo2.update({		
        data: res.data,		
        autoRow: true,
	})
});


到这里就结束啦,xm-select还是很推荐的,麻烦一点的就是后端的数据的组合稍微麻烦一些,不过还好啦,哈哈哈


相关推荐

C#.NET Autofac 详解(c# autoit)

简介Autofac是一个成熟的、功能丰富的.NET依赖注入(DI)容器。相比于内置容器,它额外提供:模块化注册、装饰器(Decorator)、拦截器(Interceptor)、强o的属性/方法注...

webapi 全流程(webapi怎么部署)

C#中的WebAPIMinimalApi没有控制器,普通api有控制器,MinimalApi是直达型,精简了很多中间代码,广泛适用于微服务架构MinimalApi一切都在组控制台应用程序类【Progr...

.NET外挂系列:3. 了解 harmony 中灵活的纯手工注入方式

一:背景1.讲故事上一篇我们讲到了注解特性,harmony在内部提供了20个HarmonyPatch重载方法尽可能的让大家满足业务开发,那时候我也说了,特性虽然简单粗暴,但只能解决95%...

C# 使用SemanticKernel调用本地大模型deepseek

一、先使用ollama部署好deepseek大模型。具体部署请看前面的头条使用ollama进行本地化部署deepseek大模型二、创建一个空的控制台dotnetnewconsole//添加依赖...

C#.NET 中间件详解(.net core中间件use和run)

简介中间件(Middleware)是ASP.NETCore的核心组件,用于处理HTTP请求和响应的管道机制。它是基于管道模型的轻量级、模块化设计,允许开发者在请求处理过程中插入自定义逻辑。...

IoC 自动注入:让依赖注册不再重复劳动

在ASP.NETCore中,IoC(控制反转)功能通过依赖注入(DI)实现。ASP.NETCore有一个内置的依赖注入容器,可以自动完成依赖注入。我们可以结合反射、特性或程序集扫描来实现自动...

C#.NET 依赖注入详解(c#依赖注入的三种方式)

简介在C#.NET中,依赖注入(DependencyInjection,简称DI)是一种设计模式,用于实现控制反转(InversionofControl,IoC),以降低代码耦合、提高可...

C#从零开始实现一个特性的自动注入功能

在现代软件开发中,依赖注入(DependencyInjection,DI)是实现松耦合、模块化和可测试代码的一个重要实践。C#提供了优秀的DI容器,如ASP.NETCore中自带的Micr...

C#.NET 仓储模式详解(c#仓库货物管理系统)

简介仓储模式(RepositoryPattern)是一种数据访问抽象模式,它在领域模型和数据访问层之间创建了一个隔离层,使得领域模型无需直接与数据访问逻辑交互。仓储模式的核心思想是将数据访问逻辑封装...

C#.NET 泛型详解(c# 泛型 滥用)

简介泛型(Generics)是指在类型或方法定义时使用类型参数,以实现类型安全、可重用和高性能的数据结构与算法为什么需要泛型类型安全防止“装箱/拆箱”带来的性能损耗,并在编译时检测类型错误。可重用同一...

数据分析-相关性分析(相关性 分析)

相关性分析是一种统计方法,用于衡量两个或多个变量之间的关系强度和方向。它通过计算相关系数来量化变量间的线性关系,从而帮助理解变量之间的相互影响。相关性分析常用于数据探索和假设检验,是数据分析和统计建模...

geom_smooth()函数-R语言ggplot2快速入门18

在每节,先运行以下这几行程序。library(ggplot2)library(ggpubr)library(ggtext)#用于个性化图表library(dplyr)#用于数据处理p...

规范申报易错要素解析(规范申报易错要素解析)

为什么要规范申报?规范申报是以满足海关监管、征税、统计等工作为目的,纳税义务人及其代理人依法向海关如实申报的行为,也是海关审接单环节依法监管的重要工作。企业申报的内容须符合《中华人民共和国海关进出口货...

「Eurora」海关编码归类 全球海关编码查询 关务服务

  海关编码是什么?  海关编码即HS编码,为编码协调制度的简称。  其全称为《商品名称及编码协调制度的国际公约》(InternationalConventionforHarmonizedCo...

9月1日起,河南省税务部门对豆制品加工业试行新政7类豆制品均适用投入产出法

全媒体记者杨晓川报道9月2日,记者从税务部门获悉,为减轻纳税人税收负担,完善农产品增值税进项税额抵扣机制,根据相关规定,结合我省实际情况,经广泛调查研究和征求意见,从9月1日起,我省税务部门对豆制品...