标签：cti ble column lang code width 删除 java 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">
$(‘#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>
标签：cti ble column lang code width 删除 java html
原文地址：http://www.cnblogs.com/TZB007/p/7086909.html
