easyui是一套基于jQuery開發的簡易UI框架,其表單組件可以非常方便地對數據進行格式化處理。本文將介紹如何使用easyui對json數據進行格式化。
首先,我們需要引入easyui的js和css文件:
<link rel="stylesheet" > <link rel="stylesheet" > <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/easyui/dist/jquery.easyui.min.js"></script>
接下來,我們需要使用datagrid組件來顯示json數據,代碼如下:
<table id="dg"></table> <script> $('#dg').datagrid({ columns:[[ {field:'name',title:'名稱',width:100}, {field:'price',title:'價格',width:100}, {field:'num',title:'數量',width:100} ]] }); </script>
接著,我們需要將json數據轉換為可以被datagrid組件顯示的格式,代碼如下:
var data = [ {"name":"電視機","price":"1200","num":"10"}, {"name":"洗衣機","price":"1500","num":"20"}, {"name":"冰箱","price":"2000","num":"15"} ]; var rows = []; $.each(data, function(index, item){ rows.push({ name: item.name, price: item.price, num: item.num }); }); $('#dg').datagrid('loadData', rows);
最后,我們將datagrid組件渲染到頁面中即可:
<div class="easyui-panel" style="padding:5px;"> <table id="dg"></table> </div>
通過以上步驟,我們可以輕松地將json數據格式化為可以被datagrid組件顯示的格式。
上一篇python 豎杠符
下一篇python 淘寶客口令