EasyUI datagrid 一个可以直接运行例子一个文件六

最新推荐文章于 2025-08-08 17:07:36 发布

转载最新推荐文章于 2025-08-08 17:07:36 发布 · 93 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/LiuFengH/p/10161356.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用EasyUI框架和jQuery实现的数据表格示例，展示了如何配置表格属性，如分页、行号显示等，并通过JavaScript动态加载数据，实现数据展示。示例中还包含了对单元格的格式化处理，使数据呈现更直观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Page Title</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Application/Home/View/Public/js/easyui/themes/default/easyui.css    ">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Application/Home/View/Public/js/easyui/themes/icon.css">
     <script type="text/javascript"  src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
     <script type="text/javascript" src="http://www.jeasyui.net/Application/Home/View/Public/js/easyui/jquery.easyui.min.js"></script>
 </head>
 <body>
 <table id="dg" class="easyui-datagrid" style="width: auto; height: 350px;"></table>
 
 </body>
 <script>
 
     $("#dg").datagrid({
         iconCls: "icon-add",
         fitColumns: false,
         loadMsg: "数据加载中......",
         data:[ { "productid": "K9-DL-01", "unitcost": 12, "status": "P", "listprice": 18, "attr1": "Spotted Adult Female", "itemid": "EST-10" }, { "productid": "RP-SN-01", "unitcost": 12, "status": "P", "listprice": 18, "attr1": "Venomless", "itemid": "EST-11" }, { "productid": "RP-SN-01", "unitcost": 12, "status": "P", "listprice": 18, "attr1": "Rattleless", "itemid": "EST-12" }, { "productid": "RP-LI-02", "unitcost": 12, "status": "P", "listprice": 18, "attr1": "Green Adult", "itemid": "EST-13" }, { "productid": "FL-DSH-01", "unitcost": 12, "status": "P", "listprice": 58, "attr1": "Tailless", "itemid": "EST-14" }, { "productid": "FL-DSH-01", "unitcost": 12, "status": "P", "listprice": 23, "attr1": "With tail", "itemid": "EST-15" }, { "productid": "FL-DLH-02", "unitcost": 12, "status": "P", "listprice": 93, "attr1": "Adult Female", "itemid": "EST-16" }, { "productid": "FL-DLH-02", "unitcost": 12, "status": "P", "listprice": 93, "attr1": "Adult Male", "itemid": "EST-17" }, { "productid": "AV-CB-01", "unitcost": 92, "status": "P", "listprice": 193, "attr1": "Adult Male", "itemid": "EST-18" }, { "productid": "AV-CB-03", "unitcost": 92, "status": "P", "listprice": 193, "attr1": "Adult Male", "itemid": "EST-134" }] ,
         pagination: true,
         rownumbers: true,
         nowrap: false,
         showFooter: true,
         singleSelect: true,
 
         columns: [[
             {
                 field: 'itemid', title: '编号', width: 50, align: 'center',
                 formatter: function (value, row, index) {
                     return " <a href='javascript:void(0)' onclick='return LoadUserInfo()'>" + value + "</a>";
                 }
             },
             {
                 field: 'productid', title: '用户名', width: 150, align: 'center',
             },
             {
                 field: 'listprice', title: '姓名', width: 150, align: 'center',
             },
             {
                 field: 'unitcost', title: '操作', width: 100, align: 'center',
             },
             {
                 field: 'attr1', title: '操作', width: 100, align: 'center',
             },
             {
                 field: 'status', title: '操作', width: 100, align: 'center',
             }
         ]]
     })
 </script>
 </html>