EasyUi Datagrid 中怎样动态的改变 editor的Type
1个回答
展开全部
使用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:'productid',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":[
{"productid":"彩电","type":"checkbox"},
{"productid":"冰箱","type":"text"},
{"productid":"洗衣机","type":"number"}
]}
<!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:'productid',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":[
{"productid":"彩电","type":"checkbox"},
{"productid":"冰箱","type":"text"},
{"productid":"洗衣机","type":"number"}
]}
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
