参考手册
AppML 教程
AppML 列表
AppML PHP

AppML Forms

本章演示如何针对数据库创建输入表单。

本页上的示例使用本地 SQL 数据库。

本地 SQL 数据库在 IE 或 Firefox 中不起作用。请使用 Chrome 或 Safari。

创建一个表单模型

model_customersform.js
  1. {
  2. "database" : {
  3.     "connection" : "localmysql",
  4.     "maintable" : "Customers",
  5.     "keyfield" : "CustomerID",
  6.     "sql" : "SELECT * FROM Customers"},
  7. "updateItems" : [
  8.     {"item" : "CustomerName"},
  9.     {"item" : "Address"},
  10.     {"item" : "PostalCode"},
  11.     {"item" : "City"},
  12.     {"item" : "Country"}]
  13. }

创建一个 HTML 表单

在上一章中，您创建了一个应用程序，用于列出数据库中的记录。

现在向页面添加一个表单应用程序:

HTML Form
  1. <!DOCTYPE html>
  2. <html>
  3. <link rel="stylesheet" href="https://cankaoshouce.com/css/w3.css">
  4. <script src="https://cankaoshouce.com/js/appml/appml.js"></script>
  5. <script src="/js/appml/appml_sql.js"></script>
  6. <body>
  8. <div class="w3-container">
  9. <div id="Form01" class="w3-container w3-light-grey w3-padding-large w3-margin-bottom" appml-data="local?model=/example/appml/model_customersform">
  11. <p>
  12. <label for="customername">Customer:</label>
  13. <input id="customername" class="w3-input w3-border">
  14. </p>
  16. <p>
  17. <label for="address">Address:</label>
  18. <input id="address" class="w3-input w3-border">
  19. </p>
  21. <p>
  22. <label for="city">City:</label>
  23. <input id="city" class="w3-input w3-border">
  24. </p>
  26. <p>
  27. <label for="postalcode">Postal Code:</label>
  28. <input id="postalcode" class="w3-input w3-border">
  29. </p>
  31. <p>
  32. <label for="country">Country:</label>
  33. <input id="country" class="w3-input w3-border">
  34. </p>
  36. </div>
  38. <div appml-data="local?model=/example/appml/model_customerslist">
  39. <h2>Customers</h2>
  40. <div appml-include-html="/example/appml/inc_listcommands.html"></div>
  41. <div appml-include-html="/example/appml/inc_filter.html"></div>
  42. <table class="w3-table-all">
  43. <tr>
  44.   <th></th>
  45.   <th>Customer</th>
  46.   <th>City</th>
  47.   <th>Country</th>
  48. </tr>
  49. <tr appml-repeat="records">
  50.   <td style="cursor:pointer;width:34px;"
  51.   onclick="appml('Form01').run({{CustomerID}})">&#9998;</td>
  52.   <td>{{CustomerName}}</td>
  53.   <td>{{City}}</td>
  54.   <td>{{Country}}</td>
  55. </tr>
  56. </table>
  57. </div>
  59. </div>
  60. </body>
  61. </html>
运行一下

HTML 表单解释

appml-data="local?model=model_customersform" 定义表单的 AppML 应用程序。

创建 HTML 表单命令

使用你最喜欢的样式表（我们使用 bootstrap），创建你想要的表单命令:

inc_formcommands.html
  1. <span onclick="document.getElementById('Form01').style.display='none'" class="w3-button w3-xlarge w3-right">&times;</span>
  3. <div class="w3-bar w3-border w3-white">
  4. <button onclick="appml('Form01').newRecord();" class="w3-btn">New</button>
  5. <button onclick="appml('Form01').saveRecord();" class="w3-btn w3-green">Save</button>
  6. <button onclick="appml('Form01').deleteRecord();" class="w3-btn">Delete</button>
  7. </div>
  9. <div id="appmlmessage" class="w3-container w3-pale-yellow w3-padding" style="display:none;">
  10. <span onclick="this.parentNode.style.display='none';" class="w3-button w3-xlarge w3-right">&times;</span>
  11. <div id="message"></div>
  12. </div>

包含表单命令

在您的表单中包含表单命令:

HTML 表单
  1. <!DOCTYPE html>
  2. <html>
  3. <link rel="stylesheet" href="https://cankaoshouce.com/css/w3.css">
  4. <script src="https://cankaoshouce.com/js/appml/appml.js"></script>
  5. <script src="/js/appml/appml_sql.js"></script>
  6. <body>
  8. <div class="w3-container">
  10. <div id="Form01" class="w3-container w3-light-grey w3-padding-large w3-margin-bottom" appml-data="local?model=/example/appml/model_customersform">
  12. <div appml-include-html="/example/appml/inc_formcommands.html"></div>
  14. <p>
  15. <label for="customername">Customer:</label>
  16. <input id="customername" class="w3-input w3-border">
  17. </p>
  19. <p>
  20. <label for="address">Address:</label>
  21. <input id="address" class="w3-input w3-border">
  22. </p>
  24. <p>
  25. <label for="city">City:</label>
  26. <input id="city" class="w3-input w3-border">
  27. </p>
  29. <p>
  30. <label for="postalcode">Postal Code:</label>
  31. <input id="postalcode" class="w3-input w3-border">
  32. </p>
  34. <p>
  35. <label for="country">Country:</label>
  36. <input id="country" class="w3-input w3-border">
  37. </p>
  38. </div>
  40. <div appml-data="local?model=/example/appml/model_customerslist">
  41. <h2>Customers</h2>
  42. <div appml-include-html="/example/appml/inc_listcommands.html"></div>
  43. <div appml-include-html="/example/appml/inc_filter.html"></div>
  44. <table class="w3-table-all">
  45. <tr>
  46.   <th></th>
  47.   <th>Customer</th>
  48.   <th>City</th>
  49.   <th>Country</th>
  50. </tr>
  51. <tr appml-repeat="records">
  52.   <td style="cursor:pointer;width:34px;"
  53.   onclick="appml('Form01').run({{CustomerID}})">&#9998;</td>
  54.   <td>{{CustomerName}}</td>
  55.   <td>{{City}}</td>
  56.   <td>{{Country}}</td>
  57. </tr>
  58. </table>
  59. </div>
  61. </div>
  63. </body>
  64. </html>
运行一下

向表中添加一个可单击的列

在上一章中，您创建了一个应用程序，用于列出数据库中的记录。

现在向表中添加一个新列:

HTML 源码
  1. <!DOCTYPE html>
  2. <html>
  3. <link rel="stylesheet" href="https://cankaoshouce.com/css/w3.css">
  4. <script src="https://cankaoshouce.com/js/appml/appml.js"></script>
  5. <script src="/js/appml/appml_sql.js"></script>
  6. <body>
  8. <div class="w3-container">
  10. <div id="Form01" class="w3-container w3-light-grey w3-padding-large w3-margin-bottom" appml-data="local?model=/example/appml/model_customersform">
  12. <div appml-include-html="/example/appml/inc_formcommands.html"></div>
  14. <p>
  15. <label for="customername">Customer:</label>
  16. <input id="customername" class="w3-input w3-border">
  17. </p>
  19. <p>
  20. <label for="address">Address:</label>
  21. <input id="address" class="w3-input w3-border">
  22. </p>
  24. <p>
  25. <label for="city">City:</label>
  26. <input id="city" class="w3-input w3-border">
  27. </p>
  29. <p>
  30. <label for="postalcode">Postal Code:</label>
  31. <input id="postalcode" class="w3-input w3-border">
  32. </p>
  34. <p>
  35. <label for="country">Country:</label>
  36. <input id="country" class="w3-input w3-border">
  37. </p>
  38. </div>
  40. <div appml-data="local?model=/example/appml/model_customerslist">
  41. <h1>Customers</h1>
  42. <div appml-include-html="/example/appml/inc_listcommands.html"></div>
  43. <div appml-include-html="/example/appml/inc_filter.html"></div>
  44. <table class="w3-table-all">
  45. <tr>
  46.   <th></th>
  47.   <th>Customer</th>
  48.   <th>City</th>
  49.   <th>Country</th>
  50. </tr>
  51. <tr appml-repeat="records">
  52.   <td style="cursor:pointer;width:34px;"
  53.   onclick="appml('Form01').run({{CustomerID}})">&#9998;</td>
  54.   <td>{{CustomerName}}</td>
  55.   <td>{{City}}</td>
  56.   <td>{{Country}}</td>
  57. </tr>
  58. </table>
  59. </div>
  61. </div>
  63. </body>
  64. </html>
运行一下

onclick 事件（在新列中）触发一个调用，以运行 id="Form01" 的 HTML 元素中的 AppML 应用程序：

appml('Form01') 返回 appml 应用程序

run({CustomerID}}) 以 CustomerID 作为参数运行应用程序。

最后隐藏表单

添加一个样式隐藏 form 表单:

HTML
  1. <div id="Form01" appml-data="local?model=/example/appml/model_customersform"
  2. appml-controller="myFormController"
  3. class="jumbotron" style="display:none">

将控制器添加到表单，以便仅在加载表单并准备好显示数据时显示表单

控制器
  1. <!DOCTYPE html>
  2. <html>
  3. <link rel="stylesheet" href="https://cankaoshouce.com/css/w3.css">
  4. <script src="https://cankaoshouce.com/js/appml/appml.js"></script>
  5. <script src="/js/appml/appml_sql.js"></script>
  6. <body>
  8. <div class="w3-container">
  10. <div id="Form01" class="w3-container w3-light-grey w3-padding-large w3-margin-bottom" appml-data="local?model=/example/appml/model_customersform" appml-controller="myFormController" style="display:none;">
  12. <div appml-include-html="/example/appml/inc_formcommands.html"></div>
  14. <p>
  15. <label for="customername">Customer:</label>
  16. <input id="customername" class="w3-input w3-border">
  17. </p>
  19. <p>
  20. <label for="address">Address:</label>
  21. <input id="address" class="w3-input w3-border">
  22. </p>
  24. <p>
  25. <label for="city">City:</label>
  26. <input id="city" class="w3-input w3-border">
  27. </p>
  29. <p>
  30. <label for="postalcode">Postal Code:</label>
  31. <input id="postalcode" class="w3-input w3-border">
  32. </p>
  34. <p>
  35. <label for="country">Country:</label>
  36. <input id="country" class="w3-input w3-border">
  37. </p>
  38. </div>
  40. <div appml-data="local?model=/example/appml/model_customerslist">
  41. <h1>Customers</h1>
  42. <div appml-include-html="/example/appml/inc_listcommands.html"></div>
  43. <div appml-include-html="/example/appml/inc_filter.html"></div>
  44. <table class="w3-table-all">
  45. <tr>
  46.   <th></th>
  47.   <th>Customer</th>
  48.   <th>City</th>
  49.   <th>Country</th>
  50. </tr>
  51. <tr appml-repeat="records">
  52.   <td style="cursor:pointer;width:34px;"
  53.   onclick="appml('Form01').run({{CustomerID}})">&#9998;</td>
  54.   <td>{{CustomerName}}</td>
  55.   <td>{{City}}</td>
  56.   <td>{{Country}}</td>
  57. </tr>
  58. </table>
  59. </div>
  61. </div>
  63. <script>
  64. function myFormController($appml) {
  65.     if ($appml.message == "ready") {return -1;}
  66.     if ($appml.message == "loaded") {
  67.         document.getElementById("Form01").style.display="";
  68.     }
  69. }
  70. </script>
  72. </body>
  73. </html>
运行一下
AppML 列表
AppML PHP

分类导航

HTMLHTML5JAVASCRIPTCSSjQueryBootstrap 3 教程SassReactHTMl 颜色教程JSONXMLXPathTypeScriptAppML 教程XLinkXPointerXQueryXFormsXsltXML SchemaXSL-FOWeb ServiceWSDSOAPW3CSVGDHTMLTCP/IPjQuery Mobile 教程XHTML