正文 

当前位置： 首页 > 源码 >

如何在表单中实现 MDL 数据可选表

     2023-03-05     66

关键词：

【中文标题】如何在表单中实现 MDL 数据可选表【英文标题】：How to implement an MDL data-selectable table inside a form 【发布时间】：2017-03-11 22:47:23 【问题描述】：

我有一个 MDL 可选表：

<form action="/counselors/ $counselor->id /badges/add" method="post">
  <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
    <thead>
      <tr>
        <th class="mdl-data-table__cell--non-numeric">Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="mdl-data-table__cell--non-numeric"> $badge->name </td>
      </tr>
    </tbody>
  </table>
<!-- submit button, etc -->
</form>

该表有复选框，但在其中。但是，mdl-data-table--selectable 类是添加复选框的原因。如何使用这些复选框作为表单的输入？表中的每一行只需要一个复选框。

【问题讨论】：

【参考方案1】：

看起来他们已弃用 mdl-data-table--selectable 类，转而支持自己添加复选框 (source)

这意味着您现在应该能够将复选框链接到表单，感觉您是负责制作它们的人。

我根据this website上提供的示例修改了您上面提供的代码。

<form action="/counselors/ $counselor->id /badges/add" method="post">
  <!-- vvv Remove 'mdl-js-data-table' and 'mdl-data-table--selectable' vvv -->
  <table class="mdl-data-table mdl-shadow--2dp">
    <thead>
      <tr>

        <!-- vvv Manual Check Box Header vvv -->
        <th>
          <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="table-header">
            <input type="checkbox" id="table-header" class="mdl-checkbox__input" />
          </label>
        </th>
        <!-- ^^^ Manual Check Box Header ^^^ -->

        <th class="mdl-data-table__cell--non-numeric">Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>

        <!-- vvv Manual Check Box Row vvv -->
        <td>
          <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="row[1]">
            <input type="checkbox" id="row[1]" class="mdl-checkbox__input" />
          </label>
        </td>
        <!-- ^^^ Manual Check Box Row ^^^ -->

        <td class="mdl-data-table__cell--non-numeric"> $badge->name </td>
      </tr>
    </tbody>
  </table>
<!-- submit button, etc -->
</form>

【讨论】：

如何在 React/Express 应用程序中实现可选身份验证？

】如何在React/Express应用程序中实现可选身份验证？【英文标题】：HowtoimplementoptionalauthenticationinReact/Expressapp?【发布时间】：2021-12-1400:45:54【问题描述】：我正在构建自托管的书签管理器应用。我在前端使用React，在后端使用Expre... 查看详情

如何在 Xamarin 表单中实现分页

】如何在Xamarin表单中实现分页【英文标题】：HowtoachievePaginationinXamarinforms【发布时间】：2021-12-2613:42:06【问题描述】：我需要在列表视图页面中实现分页。在这里，我在一个表中显示成百上千条记录，因此需要分页功能。由于... 查看详情

如何在 grails 中实现表单构建器插件

】如何在grails中实现表单构建器插件【英文标题】：Howtoimplementformbuilderpluginingrails【发布时间】：2012-07-1305:35:00【问题描述】：哪些步骤会重现问题？1.在STS上创建grails项目：2.9.22.打开插件管理器，安装表单生成器插件。1.在NetB... 查看详情

如何使用 asp.net Web 表单在 Telerik 树中实现搜索和过滤

】如何使用asp.netWeb表单在Telerik树中实现搜索和过滤【英文标题】：HowtoimplementSearchandfillterinteleriktreeusingasp.netwebform【发布时间】：2022-01-1008:40:28【问题描述】：我是telerik的新手。我想过滤telerik:redtree数据但无法在收件箱中触发... 查看详情

如何在 ReactJS 中实现带有受控组件的动态表单？

】如何在ReactJS中实现带有受控组件的动态表单？【英文标题】：HowtoimplementadynamicformwithcontrolledcomponentsinReactJS?【发布时间】：2017-07-0801:58:08【问题描述】：当我查看controlledformcomponentsinreact.jsofficialwebsite参考中的示例时，我想知... 查看详情

如何在 Web 表单中实现 AngularJS 控制器？

】如何在Web表单中实现AngularJS控制器？【英文标题】：HowtoimplementanAngularJScontrollerinawebform?【发布时间】：2013-09-2604:29:07【问题描述】：我有一个AngularJS控制器，我想在我的MVC网络表单视图页面中使用它。我创建了一个简单的代... 查看详情

如何在现有的注册表单中实现贝宝付款按钮

】如何在现有的注册表单中实现贝宝付款按钮【英文标题】：howtoimplementpaypalpaymentbuttoninanexistentsignupform【发布时间】：2011-10-3118:16:17【问题描述】：我有一种强烈的感觉，这个问题要么被关闭，要么根本不回答，因为我在网上... 查看详情

如何在表单中实现类似 Stack Overflow 的水印？

】如何在表单中实现类似StackOverflow的水印？【英文标题】：HowcanIimplementStackOverflow-likewatermarksinforms?【发布时间】：2011-01-1615:38:00【问题描述】：我记得在某处看到过一个教程，其中讨论了如何以更“可用”的方式设置输入表单... 查看详情

如何在 Razor 页面中实现两个具有单独 BindProperties 的表单？

】如何在Razor页面中实现两个具有单独BindProperties的表单？【英文标题】：HowtoimplementtwoformswithseparateBindPropertiesinRazorPages?【发布时间】：2018-07-0901:13:18【问题描述】：我正在使用带有Razor页面的ASP.NETCore2，并且我试图在一个页面... 查看详情

如何在 Vue 应用程序（使用 Vuetify.js）中实现带有验证的简单表单？

】如何在Vue应用程序（使用Vuetify.js）中实现带有验证的简单表单？【英文标题】：HowtoimplementasimpleformwithvalidationinaVueapp(withVuetify.js)?【发布时间】：2018-06-0912:32:08【问题描述】：我正在尝试使用Vuetify.js示例在使用Vue.js构建的网... 查看详情

在 TableView 中实现表单

】在TableView中实现表单【英文标题】：ImplementingaformwithinaTableView【发布时间】：2012-03-1714:44:52【问题描述】：我想实现一个表单以在我的应用程序的TableView中插入数据。我希望表单显示为表格，表格的每一行代表一个TextField。这... 查看详情

如何在现有数据库中实现 ASP.NET Identity 2.0？

】如何在现有数据库中实现ASP.NETIdentity2.0？【英文标题】：HowtoimplementASP.NETIdentity2.0inexistingdatabase?【发布时间】：2015-07-2118:51:24【问题描述】：我目前在ASP.NET4.5Web表单项目中实现了现有成员资格。该应用程序使用带有DbContext的En... 查看详情

如何在一个form表单中实现多个submit

 Asweallknow，通过设置inputtype=“submit”，我们可以把form表单中的值通过post方式传递给action所指向的页面。下图中，我们可以把userName，userAge，userSex这三个值传递到xxx.jsp<formaction="xxx.jsp"method="post">   &nb 查看详情

如何在 asp.net 网页中实现 html 表单 - asp.net 中的两个表单问题

】如何在asp.net网页中实现html表单-asp.net中的两个表单问题【英文标题】：howimplementanhtmlforminsideanasp.netwebpage-twoformsissueinasp.net【发布时间】：2012-05-0119:41:00【问题描述】：请看这个html代码：<!--PAGE-5--><divclass="sectioncc_content_... 查看详情

在引导程序中实现用于注册的水平内联表单

...，前两个文本输入字段相互融合，提交按钮位于左端。我如何在引导程序中实现这一点？【问题讨论】：【参考方案1】：我刚刚采用了引导 查看详情

在 Silverlight 中实现登录和注册表单动画

...程序模板中，我们有一个登录并注册带有动画的子窗口。如何在我的silverlight应用程序中为其他子窗口实现这个动画？！！-任何样品-任何一步一步的指导谢谢【问题讨论】：【参考方 查看详情

php：如何在一个表单操作中实现图片与文字一起传递

比如企业网站的产品。在后台添加产品的操作中。一次就将2个内容（图片路径与文字内容）都保存到数据库。php接收表单数据的话是可以接收上传图片和文字表单信息的，在表单中有文件上传的时候记得表单的form属性的method要... 查看详情

如何在核心数据中实现它

】如何在核心数据中实现它【英文标题】：howtoimplementthatincoredata【发布时间】：2011-03-2415:07:10【问题描述】：在SQL中我们使用以下子句其中studentNamelike\'%a\'andStudentID=1如何在目标c和核心数据中使用setpredicate进行fetchrequest我只有... 查看详情