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

代码语言：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": "搜索",
                            "type": "submit"
                        }
                    },
                    {
                        "type": "plain",
                        "text": "这里的表单项可以配置多个"
                    }
                ]
            },
            "bulkActions": [
                {
                    "label": "批量删除",
                    "actionType": "ajax",
                    "api": "delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/${ids|raw}",
                    "confirmText": "确定要批量删除?"
                },
                {
                    "label": "批量修改",
                    "actionType": "dialog",
                    "dialog": {
                        "title": "批量编辑",
                        "name": "sample-bulk-edit",
                        "body": {
                            "type": "form",
                            "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/bulkUpdate2",
                            "body": [
                                {
                                    "type": "hidden",
                                    "name": "ids"
                                },
                                {
                                    "type": "input-text",
                                    "name": "engine",
                                    "label": "Engine"
                                }
                            ]
                        }
                    }
                }
            ],
            "quickSaveApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/bulkUpdate",
            "quickSaveItemApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/$id",
            "filterTogglable": true,
            "headerToolbar": [
                "filter-toggler",
                "bulkActions",
                {
                    "type": "tpl",
                    "tpl": "定制内容示例：当前有 ${count} 条数据。",
                    "className": "v-middle"
                },
                {
                    "type": "columns-toggler",
                    "align": "right"
                },
                {
                    "type": "drag-toggler",
                    "align": "right"
                },
                {
                    "type": "pagination",
                    "align": "right"
                }
            ],
            "footerToolbar": [
                "statistics",
                "switch-per-page",
                "pagination"
            ],
            "columns": [
                {
                    "name": "id",
                    "label": "ID",
                    "width": 20,
                    "sortable": true,
                    "type": "text",
                    "toggled": true,
                    "remark": "Bla bla Bla"
                },
                {
                    "name": "engine",
                    "label": "Rendering engine",
                    "sortable": true,
                    "searchable": true,
                    "popOver": {
                        "body": "Popover 内容：${platform}",
                        "trigger": "hover"
                    },
                    "popOverEnableOn": "this.id === 1",
                    "type": "text",
                    "toggled": true
                },
                {
                    "name": "browser",
                    "label": "Browser",
                    "sortable": true,
                    "type": "text",
                    "toggled": false
                },
                {
                    "name": "platform",
                    "label": "Platform(s)",
                    "popOver": {
                        "body": "Popover 内容：${platform}"
                    },
                    "sortable": true,
                    "type": "text",
                    "toggled": true
                },
                {
                    "name": "version",
                    "label": "Engine version",
                    "quickEdit": true,
                    "type": "text",
                    "toggled": true,
                    "filterable": {
                        "options": [
                            {
                                "label": "4",
                                "value": "4"
                            },
                            {
                                "label": "5",
                                "value": "5"
                            },
                            {
                                "label": "6",
                                "value": "6"
                            }
                        ]
                    }
                },
                {
                    "type": "text",
                    "name": "grade",
                    "label": "CSS grade",
                    "quickEdit": {
                        "saveImmediately": true,
                        "mode": "inline",
                        "type": "select",
                        "options": [
                            "A",
                            "B",
                            "C",
                            "D",
                            "X"
                        ]
                    }
                },
                {
                    "type": "operation",
                    "label": "操作",
                    "width": 100,
                    "buttons": [
                        {
                            "type": "button",
                            "icon": "fa fa-eye",
                            "actionType": "dialog",
                            "tooltip": "查看",
                            "dialog": {
                                "title": "查看.........完整代码请登录后点击上方下载按钮下载查看