jqgrid 设置编辑行中的某列为下拉选择项
时间: 2023-08-18 20:05:04 浏览: 58
要在编辑行中的某列中设置下拉选择项,您需要执行以下步骤:
1. 创建一个下拉选项数组,其中包含您想要在单元格中显示的选项。
2. 在colModel中为该列设置editable选项,并将其值设置为true。例如:
```
{ name: 'columnName', editable: true }
```
3. 在colModel中为该列设置edittype选项,并将其值设置为“select”。例如:
```
{ name: 'columnName', editable: true, edittype: 'select' }
```
4. 在colModel中为该列设置editoptions选项,并将其值设置为一个包含下拉选项的对象。例如:
```
{
name: 'columnName',
editable: true,
edittype: 'select',
editoptions: { value: 'option1:Option 1;option2:Option 2;option3:Option 3' }
}
```
其中,value属性包含下拉选项,每个选项都用分号分隔,选项的值和标签之间使用冒号分隔。
现在,当您单击编辑图标并进入编辑模式时,该列将显示一个下拉列表,其中包含您定义的选项。
相关问题
jqgrid行编辑列表中计算两列的和放在另外一列
在 jqGrid 中,可以使用 `editfunc` 属性为表格的行编辑列绑定事件,并且计算两列的和放在另外一列。代码如下:
```javascript
// 定义表格的列模型
var colModel = [
{ name: 'col1', index: 'col1', edittype: 'text', editable: true },
{ name: 'col2', index: 'col2', edittype: 'text', editable: true },
{ name: 'col3', index: 'col3', edittype: 'text', editable: false },
];
// 定义表格的编辑选项
var editOptions = {
oneditfunc: function() {
// 获取当前行的第一列和第二列的值
var col1 = parseFloat($("#" + this.id + "_col1").val());
var col2 = parseFloat($("#" + this.id + "_col2").val());
// 计算两列的和
var sum = col1 + col2;
// 将计算结果放入第三列
$("#" + this.id + "_col3").val(sum);
}
};
// 创建 jqGrid
$("#grid").jqGrid({
url: 'data.json',
datatype: 'json',
colModel: colModel,
editOptions: editOptions,
});
```
上述代码中,我们首先定义了表格的列模型,其中每一列都具有 `editable` 属性,表示该列可以编辑。然后定义了表格的编辑选项 `editOptions`,其中的 `oneditfunc` 属性指定了编辑时的事件处理函数。当用户开始编辑单元格时,该事件处理函数会被触发,我们在其中获取当前行的第一列和第二列的值,计算两列的和,并将计算结果放入第三列中。
最后,我们使用 `jqGrid()` 方法创建了 jqGrid,并指定了数据源为 `data.json`。注意,这里的 `data.json` 是一个 JSON 格式的数据文件,其中包含了表格的数据。如果需要从服务端获取数据,可以将 `url` 属性指定为服务端接口的 URL。
jqgrid 筛选列实现下拉选择男女
您可以使用 jqgrid 的列筛选器(column filter)来实现下拉选择男女。具体步骤如下:
1. 在 jqgrid 的 colModel 中为需要筛选的列添加 stype:'select' 属性。
2. 在 colModel 中添加 searchoptions 属性,设置下拉框的选项。
例如:
```
colModel:[
{name:'gender', index:'gender', stype:'select', searchoptions:{value:':All;M:Male;F:Female'}}
]
```
其中,gender 列的筛选器类型为 select,value 属性定义了下拉框的选项,格式为 'value:label'。
3. 在 jqgrid 的配置项中开启列筛选器功能。
例如:
```
$('#grid').jqGrid({
...
search:true,
postData:{filters:''},
...
});
```
其中,search 属性设置为 true,表示开启列筛选器功能。
4. 在 jqgrid 的工具栏中显示列筛选器。
例如:
```
$('#grid').jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:true});
```
其中,search:true 表示显示列筛选器。
这样,您就可以在 jqgrid 的列筛选器中选择男女来筛选数据了。