amis sdk实现表格增删改查示例代码-html代码-BFW代码库

amis sdk实现表格增删改查示例代码

代码语言：html

所属分类：表格

代码描述：amis sdk实现表格增删改查示例代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <title>amis demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
     <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mock.min.js"></script>

    <link rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/amis/sdk.css" />
    <link rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/amis/helper.css" />
    <link rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/amis/iconfont.css" />
    <!-- 这是默认主题所需的，如果是其他主题则不需要 -->
    <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
    <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
    <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
    <style>
        html,
          body,
          .app-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
          }
    </style>
</head>

<body>
    <div id="root" class="app-wrapper"></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/amis/sdk.js"></script>
    <script type="text/javascript">
        window.enableAMISDebug = true;
      Mock.mock(/\/sample\?page=(\d+)&perPage=(\d+)/, {

  'status': 0, // status 值为 0
  'msg': 'ok',
  'data|100': {
    'count|10-200': 171, // count 在10到200之间随机
    'rows|1-20': [ // rows 数量在1到20之间随机
      {
        'engine': '@cname', // 使用随机名称
        'browser|1': ['Mozilla', 'Safari', 'Chrome', 'IE'],
        'platform|1': ['Win 95+', 'OSX.1+', 'OSX.3', 'OSX.4+'],
        'version|1': '@float(1.0, 2.0, 2, 2)', // 随机1-2的小数
        'grade|1': ['A', 'B', 'C'],   
        'id|1-100': 1  
      }
    ]  
  }
});
        (function () {
            let amis = amisRequire('amis/embed');
            // 通过替换下面这个配置来生成不同页面
            let amisJSON = {
    "type": "page",
    "title": "增删改查示例",
    "body": [
        {
            "type": "crud",
            "draggable": true,
            "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample?waitSeconds=1",
            "perPage": 15,
            "keepItemSelectionOnPageChange": true,
            "maxKeepItemSelectionLength": 11,
            "labelTpl": "${id} ${engine}",
            "filter": {
                "title": "条件搜索",
                "submitText": "",
                "body": [
                    {
                        "type": "input-text",
                        "name": "keywords",
                        "placeholder": "通过关键字搜索",
                        "addOn": {
                            "label": "搜索",
                            "typ.........完整代码请登录后点击上方下载按钮下载查看