Javascript 使用jQuerysUI时,如何获取所选项目的列表?

Javascript 使用jQuerysUI时,如何获取所选项目的列表?,javascript,html,jquery,jquery-ui,Javascript,Html,Jquery,Jquery Ui,我目前正在用PHP构建一个文件下载,就像GoogleDrive一样,但这只是一种更简单的方式。所以在我的例子中,我有一个包含一些文件的列表。为了去掉每行中的下载按钮,我计划使用一个下载按钮和jQuerysSeleactable函数: $( "#storage-files-table" ).selectable(); 现在我可以选择一行或多行。当我现在按下下载按钮时,我想得到所有选定元素的列表,以便我现在知道应该下载哪个文件。有人知道我怎么做吗 jQuery(文档).ready(函数($){

我目前正在用PHP构建一个文件下载,就像GoogleDrive一样,但这只是一种更简单的方式。所以在我的例子中,我有一个包含一些文件的列表。为了去掉每行中的下载按钮,我计划使用一个下载按钮和jQuerysSeleactable函数:

$( "#storage-files-table" ).selectable();
现在我可以选择一行或多行。当我现在按下下载按钮时,我想得到所有选定元素的列表,以便我现在知道应该下载哪个文件。有人知道我怎么做吗

jQuery(文档).ready(函数($){
$(“表”).selective();
});
函数下载(){
//在这里,我想获得所有选定行的列表
}

下载
可乐
可乐
可乐
a1
a2
a3
b1
b2
b3
c1
c2
c3
  • 您可以使用
    .find(“tr.ui-selected”)
    查找所选元素
  • 另外,如果您计划选择
    t行,请不要忘记使用
    t正文
    作为您的被选中者
  • jQuery库应该领导jQueryUI库,所以确保首先调用jQuery,然后再调用它的UI扩展
  • 停止在处理程序JS上使用内联。很难调试和跟踪错误。JS应该放在一个地方,而不是分散在HTML文件中
jQuery(函数($){
常量$tbody=$(“#myTable tbody”);
函数下载(){
//在这里,我想获得所有选定行的列表
const$trSelected=$tbody.find(“tr.ui-selected”);
//收集数据文件id值
const id=$trSelected.get().map(tr=>tr.dataset.fileId);
控制台日志(IDs);
}
$tbody.selective();
美元(“#下载”)。在('点击',下载);
});
.ui选择了td{
背景:#0bf;
}
下载
可乐
可乐
可乐
a1
a2
a3
b1
b2
b3
c1
c2
c3

考虑以下示例

jQuery(文档).ready(函数($){
功能下载(e){
e、 预防默认值();
所选变量=$(“tr.ui-selected”);
var-sArr=[];
如果(选定。长度){
选定。每个(功能(i、el){
sArr.push($(el.data(“文件”));
});
//使用数组执行下载
}否则{
返回false;
}
}
$(“#下载表格正文”)。可选({
停止:函数(){
var result=$(“#选择结果”).empty();
result.append(“您已选择:”);
$(“tr.ui-selected”,this)。每个(函数(i,el){
result.append($(el).data(“文件名”)+“”);
});
if($(“tr.ui-selected”).长度){
$(“#下载”).prop(“禁用”,false);
}否则{
$(“#下载”).prop(“已禁用”,true);
}
}
});
$(“#下载”)。点击(下载);
});
#下载表{
字号:1.4em;
}
#下载table.ui{
背景#FECA40;
}
#下载表格。用户界面已选定{
背景:#F39814;
颜色:白色;
}
#下载表格td{
保证金:3倍;
填充:0.4em;
字号:1.4em;
高度:18px;
}

选择您的下载。
第1列
第2列
第3列
a1
a2
a3
b1
b2
b3
c1
c2
c3

下载
这是否回答了您的问题@不,这对我没有帮助!我试图从外部函数中获取所有信息当然了。。。您可以使用
.ui selected
获取项目,这在上面链接的第一个答案中提到,也在下面有人发布的答案中显示。您希望从单元格内部获取行信息、单元格信息或文本详细信息吗?是否可以从每个选定行获取数据属性列表?我计划加密数据库中与文件相关的所有选定主键,并将其设置为
数据文件id
,以便知道应该提供哪些文件。还是你有更好的主意?这安全吗?@Jo先生,这不仅安全,而且还安全。在
TR
元素内部,使用
data foobar=“baz,which”
然后使用jQuery
.data(“foobar”)
获取值。我将进行编辑以向您展示一个快速示例。当使用加密文件id(主键)不安全时,有没有更好的方法来获取前端中选定的文件与数据库中存储的文件之间的关系?@Mr.Jo为什么没有?这只是一个值,通常是这样做的。验证应该是服务器端的。如果我向您的服务器发送POST请求,您应该提前知道是否允许我下载特定的项目ID。