EasyUI数据表格中嵌入下拉框

news2025/4/23 4:18:34

效果

在这里插入图片描述

代码

$(function () {
    // 标记当前正在编辑的行
    var editorIndex = -1;
    var data = [
        {
            code: 1,
            name: '1',
            price: 1,
            status: 0
        },
        {
            code: 2,
            name: '2',
            price: 2,
            status: 1
        }
    ]
    
    $('#dg').datagrid({
        data: data,
        onDblClickCell:function (index, field, value) {
            var dg = $(this);
            if(field !== 'status' && editorIndex !== -1) {
                dg.datagrid("endEdit",editorIndex)
                return;
            }else if(field === 'status' && editorIndex !== -1 && editorIndex !== index) {
                dg.datagrid("endEdit",editorIndex)
                return;
            }

            if(field === 'status' && editorIndex === -1) {
                editorIndex = index;
                dg.datagrid("beginEdit",index)
            }
            

        },
        onSelect: function(index, row) {
            var dg = $(this);
            if(editorIndex !== index) {
                dg.datagrid("endEdit",index)
            }
        },
        onClickCell: function(index, field, value) {
            var dg = $(this);
            if(editorIndex !== -1 && field !== "status") {
                dg.datagrid("endEdit",editorIndex)
            } else if(field === 'status' && editorIndex !== -1 && editorIndex !== index) {
                dg.datagrid("endEdit",editorIndex)
            }
        },
        onEndEdit:function (index, row, changes) {
            if(editorIndex === index) {
                editorIndex = -1;
                var dg = $(this);
                dg.datagrid("updateRow",index,row)
            }
        },
        columns:[[
            {field:'code',title:'代码',width:100,align: 'center'},
            {field:'name',title:'名称',width:100,align: 'center'},
            {field:'price',title:'价格',width:100,align:'center'},
            {field:'status',title:'状态',width:100,align:'center',formatter:function(value,row,index){
                return value && (value === 1 || value === '1')  ? "禁用" : "启用"
            },
                editor: {
                type: 'combobox',
                options: {
                    valueField: 'value',
                    textField: 'text',
                    data: [{value:1,text:'禁用'},{value:0,text:'启用'}]
                }
                }

            }
        ]]
    });

})

解析

列渲染为下拉框

{field:'status',title:'状态',width:100,align:'center',formatter:function(value,row,index){
    return value && (value === 1 || value === '1')  ? "禁用" : "启用"
},
    editor: {
    type: 'combobox',
    options: {
        valueField: 'value',
        textField: 'text',
        data: [{value:1,text:'禁用'},{value:0,text:'启用'}]
    }
    }

}

双击触发编辑行

onDblClickCell:function (index, field, value) {
    var dg = $(this);
    // 关闭其他行的行编辑
    if(field !== 'status' && editorIndex !== -1) {
        dg.datagrid("endEdit",editorIndex)
        return;
    }else if(field === 'status' && editorIndex !== -1 
    && editorIndex !== index) {
        dg.datagrid("endEdit",editorIndex)
        return;
    }
	
	// 监听指定列,触发行编辑
    if(field === 'status' && editorIndex === -1) {
        editorIndex = index;
        dg.datagrid("beginEdit",index)
    }
},

监听关闭行编辑

onSelect: function(index, row) {
  var dg = $(this);
  if(editorIndex !== index) {
      dg.datagrid("endEdit",index)
  }
},
onClickCell: function(index, field, value) {
  var dg = $(this);
  if(editorIndex !== -1 && field !== "status") {
      dg.datagrid("endEdit",editorIndex)
  } else if(field === 'status' && editorIndex !== -1 
  && editorIndex !== index) {
      dg.datagrid("endEdit",editorIndex)
  }
},

监听编辑结束事件更新行数据

  onEndEdit:function (index, row, changes) {
      if(editorIndex === index) {
          editorIndex = -1;
          var dg = $(this);
          dg.datagrid("updateRow",index,row)
      }
  },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2321122.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C语言:扫雷

在编程的世界里,扫雷游戏是一个经典的实践项目。它不仅能帮助我们巩固编程知识,还能锻炼逻辑思维和解决问题的能力。今天,就让我们一起用 C 语言来实现这个有趣的游戏,并且通过图文并茂的方式,让每一步都清晰易懂 1. 游…

操作系统必知的面试题

🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/literature?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,…

清华大学.智灵动力-《DeepSeek行业应用实践报告》附PPT下载方法

导 读INTRODUCTION 今天分享是由清华大学.智灵动力:《DeepSeek行业应用实践报告》,主要介绍了DeepSeek模型的概述、优势、使用技巧、与其他模型的对比,以及在多个行业中的应用和未来发展趋势。为理解DeepSeek模型的应用和未来发展提供了深入的…

可视化图解算法:链表的奇偶重排(排序链表)

1. 题目 描述 给定一个单链表,请设定一个函数,将链表的奇数位节点和偶数位节点分别放在一起,重排后输出。 注意是节点的编号而非节点的数值。 数据范围:节点数量满足 0≤n≤105,节点中的值都满足 0≤val≤10000 要…

SAP Activate Methodology in a Nutshell Phases of SAP Activate Methodology

SAP Activate Methodology in a Nutshell Phases of SAP Activate Methodology

开源AI大模型、AI智能名片与S2B2C商城小程序源码:实体店引流的破局之道

摘要:本文聚焦实体店引流困境,提出基于"开源AI大模型AI智能名片S2B2C商城小程序源码"的技术整合方案。通过深度解析各技术核心机制与协同逻辑,结合明源云地产营销、杭州美甲店裂变等实际案例,论证其对流量精准获取、客户…

JVM 02

今天是2025/03/23 19:07 day 10 总路线请移步主页Java大纲相关文章 今天进行JVM 3,4 个模块的归纳 首先是JVM的相关内容概括的思维导图 3. 类加载机制 加载过程 加载(Loading) 通过类全限定名获取类的二进制字节流(如从JAR包、网络、动态…

pyecharts在jupyter notebook中不能够渲染图表问题。

在使用jupyter notebook中使用pyecharts绘制可视化图表的时候,发现图表不能渲染到页面中,生成的html是没问题的,本文主要解决在jupyter notebook中不能渲染这个问题。 1、原因分析 2、解决办法 如果是使用的虚拟环境,需要下你提前激活虚拟环境,再进行下列操作。 因为需要…

《AI大模型趣味实战 》第7集:多端适配 个人新闻头条 基于大模型和RSS聚合打造个人新闻电台(Flask WEB版) 1

AI大模型趣味实战 第7集:多端适配 个人新闻头条 基于大模型和RSS聚合打造个人新闻电台(Flask WEB版) 1 摘要 在信息爆炸的时代,如何高效获取和筛选感兴趣的新闻内容成为一个现实问题。本文将带领读者通过Python和Flask框架,结合大模型的强大…

基于Spring Boot的健身房管理系统的设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导,欢迎高校老师/同行前辈交流合作✌。 技术范围:SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容:…

WSL Linux 子系统download

WSL各Linux 子系统下载 WSL Linux 最新下载 微软应用商店 | Microsoft StoreWSL Linux 历史版下载复制应用商店Linux地址到转换下载地址https://store.rg-adguard.net/ Version百度网盘离线下载OracleLinux提取

Qt中通过QLabel实时显示图像

Qt中的QLabel控件用于显示文本或图像,不提供用户交互功能。以下测试代码用于从内置摄像头获取图像并实时显示: Widgets_Test.h: class Widgets_Test : public QMainWindow {Q_OBJECTpublic:Widgets_Test(QWidget *parent nullptr);~Widgets…

基于springboot的校园资料分享平台(048)

摘要 随着信息互联网购物的飞速发展,国内放开了自媒体的政策,一般企业都开始开发属于自己内容分发平台的网站。本文介绍了校园资料分享平台的开发全过程。通过分析企业对于校园资料分享平台的需求,创建了一个计算机管理校园资料分享平台的方案…

CS2 demo manager 安装

CS2DM CS Demo Managerhttps://cs-demo-manager.com/PostgreSQL(CS2DM需要17以上) EDB: Open-Source, Enterprise Postgres Database Managementhttps://www.enterprisedb.com/downloads/postgres-postgresql-downloads 新CS2dm现在打开是这样的&…

奇怪的异形选项卡样式、弧形边框选项卡

<template><div :class"$options.name"><div class"tab">默认选项卡</div><div class"tab" active>选中选项卡</div><el-divider /><el-tabs v-model"tabActiveName" tab-click"(t…

3.23 代码随想录第二十四天打卡

122.买卖股票的最佳时机II (1)题目描述: (2)解题思路: class Solution { public:int maxProfit(vector<int>& prices) {int result 0;for (int i 1; i < prices.size(); i) {result max(prices[i] - prices[i - 1], 0);}return result;} }; (3)总结: 1.假…

Python---数据分析(Pandas十一:二维数组DataFrame统计计算二)

1、std 用于计算 DataFrame 中数值的标准差。 DataFrame.std(axis0, skipnaTrue, ddof1, numeric_onlyFalse, **kwargs) 描述说明axis {0 或 ‘index’, 1 或 ‘columns’, None}, 默认为 0。这个参数决定了计算标准差是在哪个轴上进行&#xff1a; 如果 axis0 或 axisindex&…

OpenCV平滑处理:图像去噪与模糊技术详解

引言 在图像处理中&#xff0c;噪声是一个常见的问题&#xff0c;它可能来自于图像采集设备、传输过程或环境干扰。为了去除噪声并改善图像质量&#xff0c;平滑处理&#xff08;Smoothing&#xff09;是一种常用的技术。OpenCV提供了多种平滑处理方法&#xff0c;包括均值滤波…

使用Python将视频转化为gif

使用Python将视频转化为gif 一、前言二、准备三、测试 一、前言 最近想把喜欢的视频片段作成gif&#xff0c;就试着用Python做了下&#xff0c;感觉效果还行&#xff0c;这里做个记录。 二、准备 先下载安装对应的库&#xff0c;命令如下&#xff1a; pip install moviepy …

HTTP长连接与短连接的前世今生

HTTP长连接与短连接的前世今生 大家好&#xff01;作为一名在互联网摸爬滚打多年的开发者&#xff0c;今天想跟大家聊聊HTTP中的长连接和短连接这个话题。 记得我刚入行时&#xff0c;对这些概念一头雾水&#xff0c;希望这篇文章能帮助新入行的朋友少走些弯路。 什么是HTTP…