165-template-148
/
blank
forked from d8dfun/blank


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表格渲染测试</title>
  <script src="https://unpkg.com/juris"></script>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    th { background-color: #f2f2f2; }
  </style>
</head>
<body>
  <h1>Juris 表格渲染测试</h1>
  <div id="app"></div>

  <script>
    // 测试数据
    const testData = [
      { id: 1, name: "测试用户1", role: "管理员" },
      { id: 2, name: "测试用户2", role: "用户" }
    ];

    // 创建表格渲染函数
    function renderTestTable(data) {
      return {
        tag: "table",
        children: [
          // 表头
          {
            tag: "thead",
            children: [
              {
                tag: "tr",
                children: [
                  { tag: "th", text: "ID" },
                  { tag: "th", text: "姓名" },
                  { tag: "th", text: "角色" }
                ]
              }
            ]
          },
          // 表体 - 使用数组格式
          {
            tag: "tbody",
            children: data.map(item => ({
              tr: {
                children: [
                  { tag: "td", text: item.id.toString() },
                  { tag: "td", text: item.name },
                  { tag: "td", text: item.role }
                ]
              }
            }))
          }
        ]
      };
    }

    // 创建Juris应用
    const app = new Juris({
      states: {
        tableData: testData
      },
      layout: {
        tag: "div",
        children: [
          { tag: "h2", text: "简单表格测试" },
          () => renderTestTable(app.getState("tableData"))
        ]
      }
    });

    // 渲染应用
    app.render('#app');
    
    console.log("应用已渲染");
  </script>
</body>
</html>