Easyui datagrid 动态添加数据
2017-05-17 15:08
513 查看
1、页面代码
2、后台代码
3、页面动态加载行数居
<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>
相关文章推荐
- easyui tree datagrid动态添加表头和表格数据,动态弹出框,修改和删除按钮
- 【项目实战】---为EasyUI DataGrid的某一动态加载数据列添加超链接,点击超链接触发Onclick方法
- 扩展easyui.datagrid,添加数据loading遮罩效果代码
- 扩展easyui.datagrid,添加数据loading遮罩效果代码
- jQuery扩展easyui.datagrid,添加数据loading遮罩效果代码
- JS-easyui 扩展easyui.datagrid,添加数据loading遮罩效果代码
- datagrid动态数据添加超链接的方法
- easyui-datagrid动态修改url,实现datagrid中数据的更新变化
- EasyUI datagrid动态加载json数据
- EasyUI_datagrid实现动态加载列并为其绑定数据
- easyui------向datagrid中动态添加不重复的记录
- easyUI datagrid ajax实时刷新 动态添加列名
- Easyui-Datagrid实例-----动态加载数据生成Datagrid
- 扩展easyui.datagrid,添加数据loading遮罩
- easyui datagrid动态绑定列名和数据
- easyui datagrid 动态添加、移除editor
- Flex4 DataGrid添加CheckBox及动态添加数据
- JS动态给EasyUI的datagrid添加列
- 动态数据添加(DataGrid)
- EasyUI的DataGrid每行数据添加操作按钮的实现代码