easyUi改變樣式

easyui改個樣式還蠻麻煩,用datagrid的小例子來記錄一下

easyui的datagrid

官網下載.zip

目錄:

導包

<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/icon.css">
<script type="text/javascript" src="js/jquery-easyui-1.5/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5/jquery.easyui.min.js"></script>

Js創建組件

<table id="easyui-datagrid" class="easyui-datagrid" title="獎牌榜"> </table>

datalist和columns都爲json對象

$('#easyui-datagrid').datagrid({
data:datalist,
columns: columns,
width: '1082px', 
minHeight: '300px'});

效果圖:

改變樣式

將目錄下無用的.js刪掉

個人習慣..

打開easyui.css

沒錯就是直接修改組件的樣式