amis sdk实现json配置生成表格页面分页排序搜索删除示例代码-html代码-BFW代码库

amis sdk实现json配置生成表格页面分页排序搜索删除示例代码

代码语言：html

所属分类：表格

代码描述：amis sdk实现json配置生成表格页面分页排序搜索删除示例代码

下面为部分代码预览，完整代码请点击下载或在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 = {
          
      "title": "浏览器内核对 CSS 的支持情况",
      "remark": "嘿，不保证数据准确性",
      "type": "page",
      "body": {
        "type": "crud",
        "draggable": true,
        "syncLocation": false,
        "api": "/sample",
        "keepItemSelectionOnPageChange": true,
        "autoGenerateFilter": true,
        "bulkActions": [
          {
            "type": "button",
            "label": "批量删除",
            "actionType": "ajax",
            "api": "delete:/sample/${ids|raw}",
            "confirmText": "确定要批量删除?"
          },
          {
            "type": "button",
            "label": "批量修改",
            "actionType": "dialog",
            "dialog": {
              "title": "批量编辑",
              "name": "sample-bulk-edit",
              "body": {
                "type": "form",
                "api": "/sample/bulkUpdate2",
                "body": [
                  {
                    "type": "hidden",
                    "name": "ids"
                  },
                  {
                    "type": "input-text",
                    "name": "engine",
                    "label": "Engine"
                  }
                ]
              }
            }
          }
        ],
        "quickSaveApi": "/sample/bulkUpdate",
        "quickSaveItemApi": "/sampl.........完整代码请登录后点击上方下载按钮下载查看