gpt4 book ai didi

javascript - 添加音频控制作为自定义字段 - JSGrid

转载 作者:行者123 更新时间:2023-12-03 03:33:16 24 4
gpt4 key购买 nike

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

最佳答案

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

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

关于javascript - 添加音频控制作为自定义字段 - JSGrid,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45989919/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com