js循环生成多个easyui datagrid数据网格时,初始化表格

$.each( content, function(i, item){
                    var info_tpl = "";var result_tpl = "";var pre = /\<+\s*([a-z]+)\s*/;
                    info_tpl += "<div class=‘result-info‘>"
                            + "<p>【执行SQL:("+i+")】</p>"
                            + "<p>"+item.sql+"</p>"
                            + "<p>"+item.msg+"</p>";
                    //显示执行结果
                    $("#pagebox .pagebox-list:eq("+index1+") .resultbox .result-info-box").append(info_tpl);
                    $("#pagebox .pagebox-list:eq("+index1+") .resultbox .result-info-box").show();

                    if ( item.excute_result != ‘‘ && item.excute_result != undefined ) {
                        //显示结果集列
                        var resultnav_tpl = "<li><span class=‘resultnav-title‘ title=‘"+item.sql+"‘>结果集"+x+"</span></li>";

                        $("#pagebox .pagebox-list:eq("+index1+") .resultnav ul").append(resultnav_tpl);

                        result_tpl += "<div class=‘result-content‘ >"
                            +"<table class=\"easyui-datagrid\" style=\"width:100%;height:"+resultbox_height+"px;\" data-options=\"striped:true,rownumbers:true,singleSelect:true\" >"
                            +"<thead><tr>";
                        $.each( item.excute_result, function(j, vo){
                            if( j == 0 ){
                                $.each( vo, function(h, v){
                                    result_tpl += "<th data-options=\"field:‘" + h + "‘,align:‘center‘,width:80\">"+h+"</th>";
                                } );
                                result_tpl += "</tr></thead><tbody>";
                            }
                            result_tpl += "<tr>";
                            $.each( vo, function( k, val){
                                if ( pre.test(val) ) {
                                    result_tpl += "<td><xmp>" + val + "</xmp></td>";
                                } else {
                                    result_tpl += "<td title=‘" + val + "‘>" + val + "</td>";
                                }
                            });
                            result_tpl += "</tr>";
                        } );
                        result_tpl += "</tbody></table></div>";
                        $("#pagebox .pagebox-list:eq("+index1+") .resultbox").append(result_tpl);
                        $.parser.parse("#pagebox .pagebox-list:eq("+index1+") .resultbox");//JQuery选择器是解析组件的父级节点

                        x++;
                    }
                } );

需要说明的这个jquery选择器必须是你解析组件的父级以上的节点。也就是说这个查找出来的节点相当于一个容器,它只会解析容器里面的内容。

时间: 2024-10-07 16:42:13

js循环生成多个easyui datagrid数据网格时,初始化表格的相关文章

jQuery Easyui datagrid 数据表格的使用

jQuery Easyui datagrid 数据表格的使用1. 在页面显示表格的位置 提供<table>标签,指定 id 元素2. 在 JS 代码 $("#grid").datagrid({-}); 完成对表格设置表格列定义远程数据加载分页 顶部工具栏 代码效果 原文地址:https://blog.51cto.com/13587708/2420696

【解决方法】EasyUI DataGrid无数据时不显示滚动条问题

在dataGrid的定义中添加如下代码: JavaScript Code 1 2 3 4 5 6 7 8 9 10 11 onLoadSuccess : function (data) { if (data.total == 0) { $('#dg').datagrid('insertRow', { row : {} }); $("tr[datagrid-row-index='0']").css({ "visibility" : "hidden"

JQuery EasyUI 学习——Struts2与EasyUI DataGrid数据表格结合使用显示数据库数据

因为EasyUI DataGrid只要取出后台传过来的一定格式的JSON数据,就可以在前台页面数据表格中,以一定形式显示数据库中的数据.此处,我们使用Struts2框架整合DataGrid,实现数据的显示. 一.页面内容 为了在页面中显示数据库中字段内容,需要定义一个table,通过EasyUI内部设计,自动显示数据,如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF

jquery easyui DataGrid 数据表格 属性

中文帮助请点这里:中文属性详解 以下为未完结版 <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head>

[easyUI] datagrid 数据格 可以进行分页

1. 新建一个GridNode的类: public class GridNode { private Long id; private String title;//投票标题 private Integer type; private String version; private String options;//备选项数 private String participants;//参与人数 //getter/setter/constructor省略 } 2. 网页内新建一个table元素.

用js循环生成ul列表并插入到页面中

1 <body> 2 <div id="box"></div> 3 <script> 4 var arr = [ 5 '山西省委附近多次爆炸 官方称尚不确定是恐怖袭击', 6 '甘肃张掖明令禁止转基因 书记:无力辨别只能禁止', 7 '多地制定雾霾预案限行限排被批治标不治本', 8 '韩媒抱怨中国雾霾侵袭韩国 称其为"黑色灾难" ', 9 '伊朗革命卫队高官在叙利亚当"志愿者"被杀(图)' 10 ]

转 -- MVC+EF easyui dataGrid 动态加载分页表格

首先上javascript的代码 <script type="text/javascript"> $(function () { LoadGrid(); }) //加载表格!!! function LoadGrid() { $('#roleGrid').datagrid({ width: 900, striped: true, //交替条纹 fitColumns: true, //防止水平滚动 fit: true,//自动补全 iconCls: "icon-sav

JQuery EasyUI DataGrid 纵向(转置)表格插件 TransposedView

在页面上显示表格时,有时会遇到有些表格的列非常多,而行却比较少.例如财务报表,往往有几十列,行却只有最多三行,显示在页面上的话页面会被极大地拉宽,体验不好.通常的做法是把这种表格改为纵向显示,像矩阵的转置一样,行变成‘列’,列变成‘行’.该插件即可为DataGrid添加纵向排列表格的功能. 效果图如下: 插件下载:http://files.cnblogs.com/files/mergen/jquery-easyui-datagrid-transposedview.zip 使用步骤: Step 1

Jquery easyui datagrid 导出Excel

datagrid的扩展方法,用于将当前的数据生成excel需要的内容. 1 <script> 2 /** 3 Jquery easyui datagrid js导出excel 4 修改自extgrid导出excel 5 * allows for downloading of grid data (store) directly into excel 6 * Method: extracts data of gridPanel store, uses columnModel to constru