图例:
代码部分:
-----------------------------------------
导入easyui CSS,JS文件:
<link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css">
<script type="text/javascript" src="../../easyui/jquery.min.js"></script>
<script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../easyui/locale/easyui-lang-zh_CN.js"></script>
-----------------------------------------
JS代码:
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
fit:false,
border:true,
singleSelect:true,
fitColumns:true,
url : "${pageContext.request.contextPath}/standard/list",
columns : [ [
{
field : 'id',
title : '编号',
width : 100
},
{
field : 'name',
title : '名称',
width : 200
},
{
field : 'minWeight',
title : '最小重量',
width : 200
},
{
field : 'maxWeight',
title : '最大重量',
width : 200
},
{
field : 'minLength',
title : '最小长度',
width : 200
},
{
field : 'maxLength',
title : '最大长度',
width : 200
}
] ],
toolbar:"#tb",
pagination:true,
pageNumber:1,
pageSize:3,
pageList:[3,6,9]
});
$("#standardQueryBtn").click(function(){
$("#dg").datagrid("load",{
"standard.name": $("#qName").val(),
"standard.minWeight": $("#qMinWeight").val(),
"standard.minLength": $("#qMinLength").val()
});
});
});
</script>
-----------------------------------------
HTML代码:
<table id="dg"></table>
<div id="tb">
名称<input type="text" name="standard.name" id="qName" />
最小重量<input type="text" name="standard.minWeight" id="qMinWeight"/>
最小长度<input type="text" name="standard.minLength" id="qMinLength"/>
<a id="standardQueryBtn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
</div>