您的位置:首页 > 产品设计 > UI/UE

Easyui datagrid 动态添加数据

2017-05-17 15:08 513 查看
1、页面代码

<div title="客装产品" data-options="closable:false" style="overflow:auto;padding:5px;display:none;">
<div id="product_con" class="easyui-panel"  style="width:100%;height:100%;">
<table id="conProductDataGrid"></table>
</div>
</div>


<script type="text/javascript">
$(function() {
//产品信息
conProductDataGrid = $('#conProductDataGrid').datagrid({
idField : 'id',
dataPlain: true,
fit : true,
striped : true,
fitColumns : false,
rownumbers :true,
border : false,
nowrap : false,
columns : [ [ {
field : 'brandName',
title : '品牌',
width : 136,
align:'center'
}, {
field : 'name',
title : '产品名称',
width : 140,
align:'center'
}, {
field : 'price',
title : '价格',
width : 100,
align:'center',
editor:'numberspinner'
}, {
field : 'num',
title : '数量',
width : 100,
align:'center',
editor:'numberspinner'
}] ],
onContextMenu : function(e, row) {
e.preventDefault();
$(this).treegrid('unselectAll');
$(this).treegrid('select', row.id);
},
onLoadSuccess:function(){
//加载成功后,checkbox不可以手动勾选
}
});

)};
</script>


2、后台代码

List<CustomerProduct> conCardProducts = getCustomerProducts();
request.setAttribute("conCardProducts", conCardProducts);


3、页面动态加载行数居

<script type="text/javascript">
$(function() {
//校验后台返回的产品是否为空,产品数量是否大于0
if('${conCardProducts}' != null && '${conCardProducts.size()}' > 0){
var i = 0;
//使用<c:forEach标签遍历产品
<c:forEach items="${conCardProducts}" var="t" varStatus="status">
//动态插入产品数据行
$('#conProductDataGrid').datagrid('insertRow',{
index:i ,  // 索引从0开始
row: {
brandName: '${t.product.brand.name}',
name: '${t.product.name}',
price: '${t.price}',
num: '${t.num}'
}
});
i++;
</c:forEach>
}
)};
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: