上传JqGrid.js

时间:2017-02-20 14:57:18

标签: javascript jquery jqgrid

我的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

0 个答案:

没有答案