propertygrid easyui 的使用

最新推荐文章于 2023-05-05 08:41:53 发布

原创最新推荐文章于 2023-05-05 08:41:53 发布 · 911 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #propertygrid 使用

Jquery 同时被 2 个专栏收录

12 篇文章

订阅专栏

Html

3 篇文章

订阅专栏

本文介绍了一个使用EasyUI实现的属性网格展示示例，通过JSON数据加载的方式动态展示个人信息，包括姓名、地址、社会安全号码及电子邮件等字段，并对电子邮件字段进行了格式验证。

json.json

{
  "total": 4,
  "rows": [
    {
      "name": "Name",
      "value": "Bill Smith",
      "group": "ID Settings",
      "editor": "text"
    },
    {
      "name": "Address",
      "value": "",
      "group": "ID Settings",
      "editor": "text"
    },
    {
      "name": "SSN",
      "value": "123-456-7890",
      "group": "ID Settings",
      "editor": "text"
    },
    {
      "name": "Email",
      "value": "bill@gmail.com",
      "group": "Marketing Settings",
      "editor": {
        "type": "validatebox",
        "options": {
          "validType": "email"
        }
      }
    }
  ]
}

detail.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" type="text/css" href="../../../assets/js/easyui/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="../../../assets/js/easyui/themes/icon.css">

<script type="text/javascript" src="../../../assets/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../../assets/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../../assets/js/easyui/locate/easyui-lang-zh_CN.js"></script>
<script>
    $(document).ready(function () {
    
            $("#pg").propertygrid({
                url: 'json.json',
                showGroup: false,
                scrollbarSize: 0,
                showHeader: false
            })
    });
</script>
<body>
<table id="pg" class="easyui-propertygrid" style="width:300px">
</table>
</body>
</html>