我的jqgrid中有多列,我想要内联编辑功能。我有一列将显示图像,如果用户点击图像,它应该提供上传文件的功能,但功能与simpleupload.js相同,即图像选择时也应显示图像。
我遇到了很多例子,其中提供了内联编辑的示例,但是当我创建
时editype:"图像" &安培; editable:true
它显示了文本框,当我改为
时editype:"文件" &安培; editable:true
它只给我选择上传。有什么例子我可以找到上传功能和图像。
我正在制作以下小提琴示例:
var mydata = [{
name: "Toronto",
country: "Canada",
continent: "https://www.w3schools.com/css/trolltunga.jpg",
stage:"1"
}, {
name: "New York City",
country: "USA",
continent: "https://www.w3schools.com/css/trolltunga.jpg",
stage:"2"
}, {
name: "Silicon Valley",
country: "USA",
continent: "https://www.w3schools.com/css/trolltunga.jpg",
stage:"2"
}, {
name: "Paris",
country: "France",
continent: "https://www.w3schools.com/css/trolltunga.jpg",
stage:"1"
}]
var stages = { '1': 'Initiate', '2': 'Develop' };
$("#grid").jqGrid({
data: mydata,
datatype: "local",
colNames: ["Name", "Country", "Continent","Stage"],
colModel: [{
name: 'name',
index: 'name',
editable: true,
}, {
name: 'country',
index: 'country',
editable: true,
}, {
name: 'continent',
index: 'continent',
editype:"image",
formatter: function () {
return "<img src='https://www.w3schools.com/css/trolltunga.jpg' alt='my image' />";
},
editable: true
},
{ name: 'stage', index: 'stage', width: 200, editable: true, edittype: "select", formatter: 'select', editoptions: { value: stages } },
],
gridview: true,
pager: '#pager',
'cellEdit': true,
'cellsubmit' : 'clientArray',
editurl: 'clientArray',
multiselect: true
});
$("#ctlAddRow").click(AddRow);
function AddRow()
{
var newRowId = $.jgrid.randId("new");
var row={
name: "",
country: "",
continent: "",
stage:""}
$("#grid").jqGrid('addRowData', newRowId, row);
}
http://jsfiddle.net/67w3c4Lx/61/
所需的功能是这样的: https://editor.datatables.net/examples/advanced/upload.html