layui框架使用 xmselect 数据异步加载,可搜索数据 监听选择动作

需求描述:

    1.实现xmselect的单选框
    2.异步加载下拉选择的基础数据
    3.并监听点击选中动作并执行相应的操作
//初始化页面执行
$(document).ready(function(){
    //科室数据(编辑的时候使用;进入页面有一个默认选中选项,此处会用到这个)    
    var ks = "对应下面所说的value值";
    //初始化    
    var demo1 = xmSelect.render({
        //绑定元素
        el: '#ks',
        //监听选中选项动作
        on: function(data){
            //当前选中数据
            var arr = data.arr;
            if(arr !='' && arr !=undefined){
                //操作逻辑
            }
        }
        //工具栏
        toolbar: {show:true,list: ['CLEAR']},
        filterable: false,
        //分页数据设置
        paging: true,
        pageSize: 5,
        pageRemote: true,
        //开启单选
        radio: true,
        //数据处理
        remoteMethod: function (val, cb, show, pageIndex) {
            //val: 搜索框的内容, 不开启搜索默认为空, cb: 回调函数, show: 当前下拉框是否展开, pageIndex: 当前第几页
            $.ajax({
                url: '异步请求地址',
                type: 'POST',
                crossOrigin: false,
                dataType: 'json',
                cache: false,
                async: false,
                data: {
                    name: val,//搜索条件
                    page: pageIndex,//页码
                    ks:ks//编辑时使用(结合后面selected:true表示默认选中  selected:false   表示默认不选中,就可以实现在编辑的时候,一进入页面就会有默认选中的值)
                },

                //接收回传参数
                success: function (data) {
                    var count = data.count;
                    var Pages = Math.ceil(count / 5);
                    var res = data.data;
                    setTimeout(function () {
                        //需要回传一个数组
                        cb(res, Pages)
                    }, 100)
                },

                error: function (data) {
                    //这里是error的处理
                    cb([], 0);
                }
            });
        },
    });
})

 

异步请求返回数据格式:

返回参数:value(相当于下拉数据主键:比如id)   特别注意:xmselect中一定数组中的一定是value:name对应出现,否则会出现一个神奇的现象:点击选中一个,结果全选中,这是因为数组中没有value作为key的数组,组件就会认为返回的所有数据(多个数组)是一个单数组

所以正确的格式是:

数组格式:

数组详情:

注释:selected:true  表示默认选中  selected:false   表示默认不选中

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
异步加载地图数据可以提高页面加载速度和渲染效率,D3.js提供了多种方式实现异步加载地图数据,以下是一种常用方式的代码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>中国地图</title> <style> svg { width: 100%; height: 100%; } .province { fill: #ccc; stroke: #fff; stroke-width: 1px; } .city { fill: #f00; stroke: #fff; stroke-width: 1px; } </style> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <svg id="map"></svg> <script> // 创建地图容器 var svg = d3.select("#map"); var width = svg.node().getBoundingClientRect().width; var height = svg.node().getBoundingClientRect().height; // 定义投影 var projection = d3.geoMercator() .center([105, 38]) .scale(600) .translate([width / 2, height / 2]); // 定义路径生成器 var path = d3.geoPath() .projection(projection); // 异步加载省份数据 d3.json("provinces.json").then(function(provinces) { // 绘制省份 svg.selectAll(".province") .data(provinces.features) .enter() .append("path") .attr("class", "province") .attr("d", path); }); // 异步加载城市数据 d3.json("cities.json").then(function(cities) { // 绘制城市 svg.selectAll(".city") .data(cities.features) .enter() .append("circle") .attr("class", "city") .attr("cx", function(d) { return projection(d.geometry.coordinates)[0]; }) .attr("cy", function(d) { return projection(d.geometry.coordinates)[1]; }) .attr("r", 5); }); </script> </body> </html> ``` 该示例代码中使用了D3.js的Promise机制实现异步加载地图数据。通过`d3.json()`方法异步加载JSON格式的地图数据,然后在`then()`回调函数中绘制地图。由于异步加载是并行进行的,因此可以提高地图绘制效率。需要注意的是,在异步加载过程中需要进行错误处理,确保地图数据加载成功并正确解析。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值