flexgrid表格如何实现单选问题？

登录

问题描述：
需求是进入该表格页面，会传一个值来判断，是单选框还是多选框（复选框）；此处单选框是该表只能选一项；复选框则可以多选。
我自己查api调试代码，感觉应该是自动根据源代码循环出来checkbox的。现在不知道如何实现该功能，大佬给点提示解决思路。

南渡北归 · 南渡北归

2.顺便问一下，取出选中行数据按钮，回显选中行按钮；这两个按钮触发之后，打印返回的数据为空，这个是为什么……大佬求指点（demo中里面写了假数据，如果能点击按钮实现功能，那么就能console打印出非空数组来）。

KevinChen · KevinChen

您好:
1. 关于单选的问题, 要实现Radio比较困难, 如果只想选中单行, 推荐用single row的选择模式,参考示例:
https://www.grapecity.com/wijmo/ ... ion/Overview/purejs

2. 具体指的是哪个Demo? 如果是你自己实现的Demo, 能否提供一个可执行的Demo包?

南渡北归 · 南渡北归

KevinChen 发表于 2021-2-1 17:25
您好:
1. 关于单选的问题, 要实现Radio比较困难, 如果只想选中单行, 推荐用single row的选择模式,参考示例 ...

你好，此处追加的问题2，和问题1都是公用第一个demo；即flexgrid.gar那个包

KevinChen · KevinChen

你好, 从实现上看, 这部分代码与产品没有关联, 建议仔细Debug你的代码实现.

南渡北归 · 南渡北归

KevinChen 发表于 2021-2-1 17:25
您好:
1. 关于单选的问题, 要实现Radio比较困难, 如果只想选中单行, 推荐用single row的选择模式,参考示例 ...

是这样的，我这边是想用checkbox的复选框实现单选的功能（类似于radio）。flexgrid封装的功能或api是不能实现么，是需要我自己想办法写是吧；

南渡北归 · 南渡北归

南渡北归发表于 2021-2-2 14:49
是这样的，我这边是想用checkbox的复选框实现单选的功能（类似于radio）。flexgrid封装的功能或api是不能 ...

版主您好，我还是需要有一个勾选框

不知道好不好实现

南渡北归 · 南渡北归

KevinChen 发表于 2021-2-1 21:16
你好, 从实现上看, 这部分代码与产品没有关联, 建议仔细Debug你的代码实现.

版主打扰了。请问您，checkbox这个勾选框在flexgrid里面，有没有出发的时间event；问一下。

KevinChen · KevinChen

南渡北归发表于 2021-2-2 17:46
版主打扰了。请问您，checkbox这个勾选框在flexgrid里面，有没有出发的时间event；问一下。

你好，可以监听CellEditEnded事件，判断一下绑定列或值得类型即可，参考以下代码：

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import { SortDescription, format } from '@grapecity/wijmo';
import { FlexGrid } from '@grapecity/wijmo.grid';
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
// create some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
var data = [];
for (var i = 0; i < countries.length; i++) {
data.push({
id: i,
country: countries[i],
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
bool: true
});
}
// bind a grid to the raw data
var theGrid = new FlexGrid('#theGrid', {
autoGenerateColumns: false,
columns: [
{ binding: 'country', header: 'Country', width: '2*' },
{ binding: 'sales', header: 'Sales', width: '*', format: 'n2' },
{ binding: 'expenses', header: 'Expenses', width: '*', format: 'n2' },
{ binding: 'bool', header: 'Bool'}
],
itemsSource: data,
cellEditEnded: (s, e) => {
console.log(s, e)
}
});
// show the current item
var selItemElement = document.getElementById('selectedItem');
function updateCurrentInfo() {
selItemElement.innerHTML = format('Country: {country}, Sales: {sales:c0} Expenses: {expenses:c0}', theGrid.collectionView.currentItem);
}
// update current item now and when the grid selection changes
updateCurrentInfo();
theGrid.collectionView.currentChanged.addHandler(updateCurrentInfo);
// sort the data by country
var sd = new SortDescription('country', true);
theGrid.collectionView.sortDescriptions.push(sd);
}

复制代码

把上述代码放到实例的app.js里即可看到效果：
https://www.grapecity.com/wijmo/ ... nding/Basics/purejs

注意看控制台，打印的参数内容中有你需要的信息。

		自动登录	找回密码
密码			立即注册

[已处理] flexgrid表格如何实现单选问题？

8 个回复

本帖子中包含更多资源

本帖子中包含更多资源

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章