先看代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312"/>
<title>增加,刪除行</title>
<link rel="stylesheet" type="text/css" href="../easyui-ku/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="../easyui-ku/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="../easyui-ku/themes/demo.css"/>
<script type="text/javascript" src="../easyui-ku/jquery.min.js"></script>
<script type="text/javascript" src="../easyui-ku/jquery.easyui.min.js"></script>
<script type="text/javascript">
$('#dg').datagrid({
columns:[[
{field:'itemid',title:'Item ID',width:80,sortable:true},
{field:'productid',title:'Product ID',width:80,sortable:true},
{field:'product',title:'Item Details'}
]]
});
</script>
</head>
<body>
<table id="dg" class="easyui-datagrid" style="width:400px;height:250px"> </table>
</body>
</html>
這代碼寫完后,打開瀏覽器運行。原以為能看到datagrid的列名,但實際上沒有看到。找了一些資料,也沒有發現解決的方法。后來問了一位高人,他說以前這樣是可以的,現在不行了,原因是html加載是從上到下的,也就是說id="dg"這個標簽還沒加載,下面的代碼是無法控制id=“dg”的顯示樣式的。
<script type="text/javascript"> $('#dg').datagrid({ columns:[[ {field:'itemid',title:'Item ID',width:80,sortable:true}, {field:'productid',title:'Product ID',width:80,sortable:true}, {field:'product',title:'Item Details'} ]] }); </script>
聽他說完我就把上面的代碼換了一個位置發現果然行了,以下是改變位置后的代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312"/>
<title>增加,刪除行</title>
<link rel="stylesheet" type="text/css" href="../easyui-ku/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="../easyui-ku/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="../easyui-ku/themes/demo.css"/>
<script type="text/javascript" src="../easyui-ku/jquery.min.js"></script>
<script type="text/javascript" src="../easyui-ku/jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg" class="easyui-datagrid" style="width:400px;height:250px"> </table>
<script type="text/javascript">
$('#dg').datagrid({
columns:[[
{field:'itemid',title:'Item ID',width:80,sortable:true},
{field:'productid',title:'Product ID',width:80,sortable:true},
{field:'product',title:'Item Details'}
]]
});
</script>
</body>
</html>
或者也可以這樣:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="gb2312"/> <title>增加,刪除行</title> <link rel="stylesheet" type="text/css" href="../easyui-ku/themes/default/easyui.css"/> <link rel="stylesheet" type="text/css" href="../easyui-ku/themes/icon.css"/> <link rel="stylesheet" type="text/css" href="../easyui-ku/themes/demo.css"/> <script type="text/javascript" src="../easyui-ku/jquery.min.js"></script> <script type="text/javascript" src="../easyui-ku/jquery.easyui.min.js"></script> <script type="text/javascript"> $(function(){ $('#dg').datagrid({ columns:[[ {field:'itemid',title:'Item ID',width:80,sortable:true}, {field:'productid',title:'Product ID',width:80,sortable:true}, {field:'product',title:'Item Details'} ]] }); })(); </script> </head> <body> <table id="dg" class="easyui-datagrid" style="width:400px;height:250px"> </table> </body> </html>