请教EasyUi Datagrid 中怎样动态的改变 editor的Type

发布网友发布时间：2022-04-25 01:01

我来回答

共2个回答

懂视网时间：2022-04-25 05:22

使用easyui行编辑的时候完成编辑的功能比较简单，但是如果要根据一个框的值动态改变别的值或者编辑的时候禁用某个框的时候就比较麻烦了。

比如像下面这样：添加行的时候每个值都是手动输入，修改的时候第一个值不能修改。我们来看下怎么实现这样的效果。

这里写图片描述

easyui本身是不提供这么细节的功能的，需要我们自己拓展下：

在编辑的时候移除第一列的editor属性，添加的时候，添加第一列的属性。

调用：

移除：

添加：

别的操作都可以据此拓展.

热心网友时间：2022-04-25 02:30

使用formatter函数：以下是我写的实现，需要根据你的实际情况做相应调整。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http //www jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http //www jeasyui com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http //www jeasyui com/easyui/demo/demo.css">
<script type="text/javascript" src="http //www jeasyui com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http //www jeasyui com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg"></table>

<script type="text/javascript" >
$('#dg').datagrid({
url:'datagrid_data1.json',
columns:[[
{field:'proctid',title:'产品',width:100},
{field:'type',title:'可编辑区域',width:200,
formatter: function(value,row,index){
if (row.type == "checkbox"){
return '<select id="cc" class="easyui-combobox" name="dept" style="width:200px;"><option value="aa">aitem1</option><option>bitem2</option><option>bitem3</option></select>';
} else if (row.type == "text"){
return value;
}else if(row.type == "number"){
return '<input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2">';
}else{
return "ERROR";
}
}
}
]]
});
</script>
</body>
</html>

以下是该实例所用到的数据，datagrid_data1.json:

{"total":3,"rows":[
{"proctid":"彩电","type":"checkbox"},
{"proctid":"冰箱","type":"text"},
{"proctid":"洗衣机","type":"number"}
]}