操作edittype为select的列,获取/操作select

本文介绍如何在 EasyUI 中通过设置单元格为编辑状态来获取 select 下拉菜单中被选中的文本,包括使用 JavaScript 对 EasyUI Grid 的单元格进行编辑状态设置的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

edittype为select时,只有当单元格被选中(触发editcell事件)才会显示出select下拉菜单,否则只会显示被选中的文本(text)。

 cell处于编辑状态时


 cell处于非编辑状态时


而为了获取当前select下拉菜单中,被选中的文本(或者操作select更改选中项目,添加option等等)(<option value="xxx">xxx</option>),我的想法是先让单元格处于编辑状态,这样就可以获得select元素了。

//设置第x行第y列的单元格为编辑状态。

$("#UrGridId").editCell(x, y, true);

// 通过colModel设置的信息获取select元素

colModel[

......

{

name:"sup",

......

}

]

// 下面选择器大括号中的id$=sup,这个sup就是上面colModel中你配置的name。

var selectedText = $("select[id$=sup] option:selected").text();

您好,针对您的问题,我可以给您提供一些思路和代码示例,希望能帮到您。 首先,要实现 jqgrid 的行编辑和单元格下拉框选择功能,您需要引入以下两个插件: 1. jqGrid:这是一个 jQuery 插件,用于实现表格的展示和编辑功能。 2. select2:这是一个 jQuery 插件,用于实现下拉框的选择和搜索功能。 接下来,您需要在 jqGrid 中定义一个模型,其中包含需要编辑的和下拉框。例如: ``` colModel: [ { name: 'id', index: 'id', editable: false, width: 50 }, { name: 'name', index: 'name', editable: true, edittype: 'text', width: 100 }, { name: 'gender', index: 'gender', editable: true, edittype: 'select', editoptions: { value: 'M:Male;F:Female', dataInit: function(elem) { $(elem).select2({ width: '100%' }); } }, width: 100 } ] ``` 在上面的代码中,第一是 ID ,不可编辑;第二是姓名,可以编辑,编辑类型为文本框;第三是性别,可以编辑,编辑类型为下拉框,下拉框的选项值为 M:Male 和 F:Female,同时使用 select2 插件进行渲染。 最后,在 jqGrid 中启用行编辑功能和单元格编辑功能,例如: ``` editurl: 'server.php', cellEdit: true, cellsubmit: 'clientArray', rownumbers: true, rownumWidth: 40, pager: '#pager', viewrecords: true, caption: 'My first grid', height: 'auto', width: 'auto', ``` 在上面的代码中,editurl 属性指定了提交数据的 URL,cellEdit 属性启用了单元格编辑功能,cellsubmit 属性指定了提交数据的方式,rownumbers 属性启用了行号,pager 属性指定了分页控件的 ID,viewrecords 属性启用了记录总数和分页信息的显示,caption 属性指定了表格的标题,height 和 width 属性指定了表格的高度和宽度。 以上就是实现 jqGrid 行编辑和单元格下拉框选择的思路和代码示例,希望能对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值