若依框架-------弹层表格

秒速五厘米 2023-09-24 00:00 184阅读 0赞

63d3417cc1fd41ee9547266217d7fb45.png

33cdb2a4558949a3ba09291d3a47fba2.png

一、介绍

这个弹层并不是在一个页面的，他是由两个页面组合完成的，所以说是父子页面。

比如我现在要修改一个博客的分类，那么我不仅需要 博客的修改页面，还需要 分类的列表页面，望读者能够分清关系。

2f9400899fb14f24be3ac8736fe32081.png

82819ea58f55477e8dde2c63c41feee4.png

上面两个红框就是马上需要用到的两个页面。

二、实现

1、edit.html

将下面的两个方法添加到 edit.html 中的 js 代码块中

  1. function selectCategory() {
  2.     var options = {
  3.         title: '选择类别',
  4.         url:  ctx + "blog/category", // 注意，这个请求是去请求一个页面返回的，并不是JSON数据返回
  5.         callBack: doSubmit
  6.     }
  7.     $.modal.openOptions(options);
  8. }
  10. function doSubmit(index, layero){
  11.     // 这里取到的是多行的
  12.     var rows = layero.find("iframe")[0].contentWindow.getSelections();
  13.     if (rows.length > 0){
  14.         // #categoryId 就是修改页面的分类ID
  15.         // 这个 rows[0].id 就是查询分类列表得到的分类主键ID
  16.         // categoryId id 也就是数据库中对应的名称
  17.         $('#categoryId').val(rows[0].id);  
  18.     }
  19.     $.modal.close(index);
  20. }

2、查询的后端代码

1023e57978c546f1b08cbea1884e0f5c.png

注意，这里返回的是页面！ 注意，这里返回的是页面！ 注意，这里返回的是页面！

3、category.html

将下面的代码添加到JS代码块中

  1. function getSelections() {
  2.     return $("#" + table.options.id).bootstrapTable('getSelections');
  3. }

这样就能 选择数据回显到父弹框中了

发表评论

表情：
评论列表 （有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读