0

我是 JS 新手，并且一直在为我的所有网格使用 JSGrid。我正处于需要添加自定义字段的地步。问题是我不确定是否可以将 HTML 添加为我的数据的一部分。我想要做的是添加一个音频控件来播放每个特定行的 MP3。我可以在那里获得一个灰色的控件，但无法获取文件。这里的任何帮助将不胜感激！这是示例代码：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<body>



<div id="jsGrid">
<script>

    var AudioField = function(config) {
    jsGrid.Field.call(this, config);
};

AudioField.prototype = new jsGrid.Field({

 itemTemplate: function(value) {
        return $("<audio controls>").css({
            display: "inline-block",
            width: "50px",
            height: "22px"
        });
    },



});

jsGrid.fields.audio = AudioField;


    var clients = [
        { "ID": 0, "User": "Bob Jones", "Instrument": "Banjo", "Notes": "",  "Listen": false, "Audio": "<audio controls><source src = 'directory/0.mp3' type = 'audio/mp3'></audio>"},
        { "ID": 1, "User": "Lindsay Wilson", "Instrument": "Banjo", "Notes": "", "Listen": false, "Audio": "" }
    ];



    $("#jsGrid").jsGrid({
        width: "100%",
        height: "400px",

        inserting: false,
        editing: true,
        sorting: true,
        paging: true,

        data: clients,

        fields: [
            { name: "ID", type: "number", width: 50, validate: "required" , editing: false},
            { name: "User", type: "text", width: 200, editing: false },
            { name: "Instrument", type: "text", width: 200, editing: false },
            { name: "Notes", type: "text", width: 400},
            { name: "Listen", type: "checkbox", title: "Listen", sorting: false , editing: true},
            { name: "Audio", type: "audio"},
            { type: "control" }
        ]
    });
    items = $("#jsGrid").jsGrid("option", "data");
    console.log(items)
</script>
</body>
</html>
4

1 回答 1

1

一位朋友帮我解决了这个问题。问题是 CSS 问题，而不是 JavaScript。如果我删除以下代码，它可以正常工作。

 itemTemplate: function(value) {
    return $("<audio controls>").css({
        display: "inline-block",
        width: "50px",
        height: "22px"
    });
},
于 2017-09-01T11:00:06.640 回答