Easyui datagrid 动态添加数据

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%;">
                              id="conProductDataGrid">
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 conCardProducts = getCustomerProducts();
request.setAttribute("conCardProducts", conCardProducts);

3、页面动态加载行数居

<script type="text/javascript">
$(function() {
//校验后台返回的产品是否为空,产品数量是否大于0
if('${conCardProducts}' != null && '${conCardProducts.size()}' > 0){
var i = 0;
//使用
"${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>

你可能感兴趣的:(Easyui)