添加音頻控制作爲自定義字段 - JSGrid

我是新來的JS和JSGrid一直使用我所有的網格。我處於需要添加自定義字段的地步。問題是我不確定是否可以將HTML添加爲我的數據的一部分。我想要做的是添加一個音頻控制來播放每個特定行的MP3。我可以在那裏得到一個灰色的控件，但無法獲取文件。任何幫助在這裏將不勝感激！以下是示例代碼：添加音頻控制作爲自定義字段 - JSGrid

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

來源

2017-08-31 swaters

一位朋友幫我解決了這個問題。這個問題是一個CSS問題，而不是JavaScript。如果我刪除下面的代碼，它可以正常工作。

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

來源

2017-09-01 11:00:06 swaters

添加音頻控制作爲自定義字段 - JSGrid

回答

相關問題