＜项目记录Ⅰ＞jQuery网格插件——jqGrid的使用

2023-12-26 18:11:27

OSCHINA
jqGrid demos

这是我第一次写js代码。一开始不知道怎么下手，看了js、jquery有关的书和参考别人的代码后就大概知道这个开发流程了。我觉得看书比看视频好，这套系列的书我觉得挺适合初学者的。

＜项目记录Ⅰ＞jQuery网格插件——jqGrid的使用
这里简单记录一下，也不整理了。

文章目录

1.列表页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>任务列表</title>
    <%@include file="/WEB-INF/views/include/head0.jsp" %>
    <script type="text/javascript">
        $(document).ready(function() {
            initGrid();
        });

        function initGrid(){
            $('#jqGrid').jqGrid({
                url: '${ctx}/interfaces/interfaceTask/loadList',
                mtype: 'POST',
                datatype: 'json',
                responsive:true,
                page: 1,
                colModel: [
                    { label: 'id', name: 'id', key: true, hidden:true},
                    { label: '任务名称',name: 'taskName',index: 'taskName',width: 150},
                    { label: '当前期数',name: 'periodNumber',index: 'periodNumber',width: 100},
                    { label: '是否完成配置',name: 'confirm',index: 'confirm',width: 100, edittype:'select', formatter:'select', editoptions:{value:"0:是;1:否"}},
                    {label:'操作',name:'cz',search:false,sortable:false,title:false,formatter:czFmt,width:120}
                ],
                viewrecords: true,
                height: height,
                rowNum: 10,
                rowList:[10,20,30],
                loadonce:false,
                multiselect: true,
                autowidth: true,
                pager: '#jqGridPager'
            });
            $('#jqGrid').jqGrid('navGrid','#jqGridPager',{edit:false,add:false,del:false,search:false});
        }

        function czFmt(c,o,r){
            var res='';
            var id=r.id;
            var taskName = r.taskName;
            // alert(taskName);
            res+='<a class="btn-success btn-sm" href="${ctx}/interfaces/interfaceMetadata/reportForm?id='+id+'&taskName='+encodeURI(encodeURI(taskName))+'">新增制度</a>&nbsp;&nbsp;';
            <%--res+='<a class="btn-primary btn-sm" href="${ctx}/interfaces/interfaceMetadata/preview?id='+id+'&taskName='+taskName+'">预览</a>&nbsp;&nbsp;';--%>
            res+='<a class="btn-primary btn-sm" href="${ctx}/interfaces/interfaceMetadata/preview?id='+id+'&taskName='+encodeURI(encodeURI(taskName))+'">预览</a>&nbsp;&nbsp;';
            res+='<a class="btn-danger btn-sm" href="javascript:void(0)" οnclick="deleteData(\''+id+'\')">删除</a>&nbsp;&nbsp;';
            return res;
        }

        function deleteData(id){
            confirmx('你确定要删除此数据吗？',null,function(){
                $.ajax({
                    url:'${ctx}/interfaces/interfaceTask/delete',
                    type:'post',
                    dataType:'json',
                    data:{id:id},
                    success:function(res){
                        var code = res.code;
                        var message = res.message;
                        layer.msg(message);
                        $('#jqGrid').trigger('reloadGrid');
                    }
                });}
            );

        }


        function deleteDataBatch(ids){

            var _ids=$('#jqGrid').jqGrid('getGridParam','selarrrow');
            if(_ids.length==0){
                layer.msg("请选择要操作的行！");
                return
            }
            var ids = _ids.join(",");
            confirmx('你确定要删除此数据吗？',null,function(){
                $.ajax({
                    url:'${ctx}/interfaces/interfaceTask/delete',
                    type:'post',
                    dataType:'json',
                    data:{id:ids},
                    success:function(res){
                        var code = res.code;
                        var message = res.message;
                        layer.msg(message);
                        $('#jqGrid').trigger('reloadGrid');
                    }
                });}
            );

        }

        $(function() {
            $('#btnSubmit').click(function() {
                var taskName = $("#taskName").val();
                $('#jqGrid').jqGrid('setGridParam', {
                    datatype : 'json',
                    postData : {
                        taskName:taskName
                    }
                }).trigger('reloadGrid');
            });

        });

    </script>

</head>
<body>
<ul class="nav nav-tabs">
    <li class="active"><a href="${ctx}/interfaces/interfaceTask/reportList">任务列表</a></li>
</ul>
<div class="jqGrid_wrapper">

    <div class="search_row">

        <label class="col-sm-1">任务名称：</label>
        <div class="col-sm-2">
            <input id="taskName" name="taskName" type="text" class="form-control ipt-search"/>
        </div>

        <div class="col-sm-search">
            &nbsp;&nbsp;&nbsp;<input id="btnSubmit" class="btn btn-sm btn-success" type="button"  value="查询" />
               <input id="btnReset" class="btn btn-sm btn-primary" type="button" value="重 置" />
            &nbsp;&nbsp; <input id="btnDelete" class="btn btn-sm btn-danger" type="button" onclick="deleteDataBatch()" value="批量删除" />
        </div>
    </div>
    <div class="search_row_split"></div>
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
</div>
</body>
</html>

    @RequestMapping(value="loadList")
    public void loadList(InterfaceTask param,HttpServletRequest request, HttpServletResponse response){
        Page<InterfaceTask> page = interfaceTaskService.loadList(new Page<InterfaceTask>(request, response), param);
//        List<InterfaceTask> list = page.getList();
//        for (InterfaceTask interfaceTask : list) {
//            ((InterfaceTaskServiceImpl)interfaceTaskService).swapEntity(interfaceTask);
//        }
        renderGrid(request, response, page);
    }

    @Override
    public Page<InterfaceTask> loadList(Page<InterfaceTask> page, InterfaceTask entity) {
        PageHelper.startPage(page.getPageNo(),page.getPageSize());
        List<InterfaceTask> list = interfaceTaskMapper.loadList(entity);
        return PageUtils.getInstance().getPage(list);
    }

public class PageUtils<T> {

    private static PageUtils instance = new PageUtils();

    public static PageUtils getInstance(){
        return instance;
    }

    /*
    *
    * 使用PageHelper插件，返回前端需要的Page对象
    *
    * */
    public Page<T> getPage(List<T> list){
        PageInfo<T> pageInfo = new PageInfo<>(list);

        Page<T> result = new Page<>();
        result.setCount(pageInfo.getTotal());
        result.setPageSize(pageInfo.getPageSize());
        result.setPageNo(pageInfo.getPageNum());
        result.setList(list);

        return result;
    }

}

    List<InterfaceTask> loadList(InterfaceTask task);

    <sql id="New_List">
        a.id AS id ,
        a.task_id AS taskId,
        a.task_name AS taskName,
        a.period_number AS periodNumber,
        a.create_time AS createTime,
        a.update_time AS updateTime,
        a.remarks AS remarks,
        a.state AS state,
        a.report_by AS "reportBy",
        a.report_time AS reportTime,
        a.confirm AS confirm
    </sql>
    
    <select id="loadList" parameterType="com.minglead.modules.interfaces.entity.InterfaceTask" resultType="com.minglead.modules.interfaces.entity.InterfaceTask">
        SELECT
        <include refid="New_List"/>
        FROM pm_interface_task a
        left join SYS_USER b on a.REPORT_BY = b.id
        WHERE 1=1
        <if test="taskName != null and taskName != ''">
            AND a.task_name LIKE
            <if test="dbName == 'oracle'">'%'||#{taskName}||'%'</if>
            <if test="dbName == 'mysql'">CONCAT('%', #{taskName}, '%')</if>
        </if>

        <if test="id != null">
            AND a.id = #{id}
        </if>
        <if test="taskId != null and taskId != ''">
            AND a.task_id = #{taskId}
        </if>
        <if test="periodNumber != null and periodNumber != ''">
            AND a.period_number = #{periodNumber}
        </if>

        <!--
                <if test="beginDate != null and beginDate != ''">
                    <![CDATA[ AND a.create_date >= #{beginDate}]]>
                </if>

                <if test="endDate != null and endDate != ''">
                    <![CDATA[ AND a.create_date <= #{endDate}]]>
                </if>-->

        <if test="state != null and state != ''">
            AND a.state LIKE
            <if test="dbName == 'oracle'">'%'||#{state}||'%'</if>
            <if test="dbName == 'mysql'">CONCAT('%', #{state}, '%')</if>
        </if>

        ORDER BY a.period_number DESC
    </select>

    /*@RequiresPermissions("interfaces:interfaceTask:edit")*/
    @RequestMapping(value = "delete")
    public void delete(@Param("id") String id, HttpServletResponse response,RedirectAttributes redirectAttributes) {
        ActionResponse r = new ActionResponse(1,"删除成功！");
        if(StringUtils.isEmpty(id)){
            r.setMessage("删除失败,主键不能为null");
            this.responseObject(r, response);
            return;
        }
        String[] _id = id.split(",");
        for(String id0:_id){
            InterfaceTask temp = new InterfaceTask();
            temp.setId(id0);
            interfaceTaskService.deleteById(temp);
        }
        this.responseObject(r, response);
    }

成品：
＜项目记录Ⅰ＞jQuery网格插件——jqGrid的使用

2.详情页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>监测制度查看</title>
    <%@include file="/WEB-INF/views/include/head0.jsp" %>
    <script type="text/javascript">
        $(document).ready(function() {
            initGrid();
        });
        window.onload=function() {
            $("#jqgh_jqGrid_edit").text("操作");
        };
        function initGrid(){
            $('#jqGrid').jqGrid({
                url: '${ctx}/interfaces/interfaceMetadata/loadDetailData?tid=${entity.id}',

                mtype: 'POST',
                datatype: 'json',
                responsive:true,
                page: 1,
                colModel: [
                    { label: 'id', name: 'id', key: true, hidden:true},
                    { label: '列名',name: 'columNname',index: 'columNname',width: 150, editable:true},
                    { label: '数据类型',name: 'dataType',index: 'dataType',width: 150, editable:true, edittype:"select", editoptions:{value:"文本:文本;数字:数字"}},
                    { label: '关联元数据编码',name: 'sourceCode',index: 'sourceCode',width: 150, editable:true},
                    { label: '显示顺序',name: 'columOrder',index: 'columOrder',width: 150, editable:true},
                    { label: '列宽',name: 'columnWidth',index: 'columnWidth',width: 150, editable:true},
                    { label: '是否显示',name: 'display',index: 'display',width: 150, editable:true, edittype:"select", formatter:'select', editoptions:{value:"0:是;1:否"}},
                    { label: '是否报表数据',name: 'isreport',index: 'isreport',width: 150, editable:true, edittype:"select", formatter:'select', editoptions:{value:"0:是;1:否"}},
                    { label: '元数据分类',name: 'type',index: 'type',width: 150, editable:true, edittype:"select", editoptions:{value:"监测点:监测点;品类:品类;品种:品种;指标单位:指标单位;指标:指标"}},
                    { label: '值域检查',name: 'ischeck',index: 'isCheck',width: 150, editable:true},
                    { label: '计算列',name: 'expressioncolumn',index: 'expressioncolumn',width: 150, editable:true},
                    { label: '值域数据源',name: 'range',index: 'range',width: 150, editable:true},
                    { lable: '操作', name : 'edit',width : 210,height : 300,align : "right"}

            // {label:'操作',name:'cz',search:false,sortable:false,title:false,formatter:czFmt,width:120}
                ],
                viewrecords: true,
                height: height,
                rowNum: 10,
                <%--postData:{--%>
                <%--    tid : ${id}--%>
                <%--},--%>
                rowList:[10,20,30],
                loadonce:false,
                multiselect: true,
                autowidth: true,
                pager: '#jqGridPager',
                gridComplete : function() { // 第二步：数据加载完成后 添加操作按钮
                    var ids = $("#jqGrid").jqGrid('getDataIDs'); //获取表格的所有列id：287,288,289,290,291,292,293,294,295,296
                    // alert(ids.length); // 10
                    for (var i = 0; i < ids.length; i++) {
                        var id = ids[i];
                        var editBtn = "<div class='btnBox'> "
                            + "<button type='button'  οnclick='editParam("
                            + id
                            + ")'>编辑</button>"
                            + "<button type='button' οnclick='saveParam("
                            + id
                            + ")'>保存</button>"
                            + "<button type='button'  οnclick='cancelParam("
                            + id + ")'>取消</button> </div>"
                            // + "<button type='button' οnclick='deleteParam("
                            // + id + ")'>删除</button> </div>"

                        jQuery("#jqGrid").jqGrid('setRowData',ids[i], {edit : editBtn}); //给每一列添加操作按钮
                    }//end for (var i = 0; i < ids.length; i++)
                }
            });
            $('#jqGrid').jqGrid('navGrid','#jqGridPager',{edit:false,add:false,del:false,search:false});
            // $('#jqGrid').inlineNav('#jqGridPager',
            //     // the buttons to appear on the toolbar of the grid
            //     {
            //         edit: true,
            //         add: false,
            //         del: true,
            //         cancel: true,
            //         editParams: {
            //             keys: true,
            //         },
            //         addParams: {
            //             keys: true
            //         }
            //     });
        }

        function editParam(rowId) { //第三步：定义编辑操作

            var parameter = {
                oneditfunc : function(rowid) { //在行成功转为编辑模式下触发的事件，参数为此行数据id
                    alert("edited" + rowid);
                }}
            jQuery("#jqGrid").editRow(rowId);//开启可编辑模式
            //jQuery("#jqGrid").editRow(rowId,parameter); //如果需要参数
            jQuery('#jqGrid').jqGrid('editRow', rowId, true,pickdates);//开启可编辑模式
        }
        //第四步：定义保存操作，通过键值对把编辑的数据传到后台,如下
        //{upperLimit: value1,lowerLimit:value2}
        function saveParam(rowId) {
            var parameter = {
                url : "${ctx}/interfaces/interfaceMetadata/update", //代替jqgrid中的editurl
                mtype : "POST",
                extraparam : { // 额外 提交到后台的数据
                },
                successfunc : function(XHR) { //在成功请求后触发;事件参数为XHR对象，需要返回true/false;
                    // alert(XHR.responseText);//接收后台返回的数据(true)
                    if (XHR.responseText == "false") {
                        alert("保存失败");
                        return false; //返回false会使用修改前的数据填充,同时关闭编辑模式。
                    } else {
                        // alert("编辑成功");
                        return true; //返回true会使用修改后的数据填充当前行,同时关闭编辑模式。
                    }

                }//end successfunc
            }//end paramenter
            jQuery('#jqGrid').saveRow(rowId, parameter);
        }
        //第五步：定义取消操作
        function cancelParam(rowId) {

            jQuery('#jqGrid').restoreRow(rowId); //用修改前的数据填充当前行
        }

        function czFmt(c,o,r){
            var res='';
            var id=r.id;
            <%--res+='<a class="btn-success btn-sm" href="${ctx}/interfaces/interfaceMetadata/reportEdit?id='+id+'">编辑</a>&nbsp;&nbsp;';--%>
            <%--res+='<a class="btn-danger btn-sm" href="${ctx}/interfaces/interfaceTask/save'+r+'")">保存</a>&nbsp;&nbsp;';--%>
            // res+='<a class="btn-danger btn-sm" href="javascript:void(0)" οnclick="saveData(\''+r+'\')">保存</a>&nbsp;&nbsp;';
            res+='<a class="btn-danger btn-sm" href="javascript:void(0)" οnclick="saveData(\''+ JSON.stringify(r).replace(/"/g, '&quot;') +'\')">保存</a>&nbsp;&nbsp;';
            res+='<a class="btn-danger btn-sm" href="javascript:void(0)" οnclick="deleteData(\''+id+'\')">删除</a>&nbsp;&nbsp;';
            return res;
        }

        <%--function saveData(r){--%>
        <%--    console.log(r);--%>

        <%--    var dataValue = $.parseJSON(r);--%>
        <%--    console.log(dataValue);--%>
        <%--    confirmx('你确定要保存此数据吗？',null,function(){--%>
        <%--        $.ajax({--%>
        <%--            url:'${ctx}/interfaces/interfaceMetadata/update',--%>
        <%--            type:'post',--%>
        <%--            dataType:'json',--%>
        <%--            // contentType:'application/json',--%>
        <%--            data:dataValue,--%>
        <%--            success:function(res){--%>
        <%--                console.log(res);--%>
        <%--                var code = res.code;--%>
        <%--                var message = res.message;--%>
        <%--                layer.msg(message);--%>
        <%--                $('#jqGrid').trigger('reloadGrid');--%>
        <%--            }--%>
        <%--        });}--%>
        <%--    );--%>
        <%--}--%>
        function deleteParam(id){
            console.log(id);
            confirmx('你确定要删除此数据吗？',null,function(){
                $.ajax({
                    url:'${ctx}/interfaces/interfaceMetadata/deleteById',
                    type:'post',
                    dataType:'json',
                    data:{id:id},
                    success:function(res){
                        var code = res.code;
                        var message = res.message;
                        layer.msg(message);
                        $('#jqGrid').trigger('reloadGrid');
                    }
                });}
            );

        }


        function deleteDataBatch(ids){

            var _ids=$('#jqGrid').jqGrid('getGridParam','selarrrow');
            if(_ids.length==0){
                layer.msg("请选择要操作的行！");
                return
            }
            var ids = _ids.join(",");
            confirmx('你确定要删除此数据吗？',null,function(){
                $.ajax({
                    url:'${ctx}/interfaces/interfaceMetadata/deleteById',
                    type:'post',
                    dataType:'json',
                    data:{id:ids},
                    success:function(res){
                        var code = res.code;
                        var message = res.message;
                        layer.msg(message);
                        $('#jqGrid').trigger('reloadGrid');
                    }
                });}
            );

        }

        function startEdit() {
            //var grid = $("#jqGrid");
            // var ids = $gridCase.jqGrid('getDataIDs');
            var ids = $("#jqGrid").jqGrid('getDataIDs'); //获取表格的所有列
            //循环开启行编辑
            for (var i = 0; i < ids.length; i++) {
                $('#jqGrid').jqGrid('editRow',ids[i]);
            }
        };

        function saveDataBatch() {
            var ids = $("#jqGrid").jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                saveParam(ids[i]);
            }
        }

        function cancelEdit() {
            var ids = $("#jqGrid").jqGrid('getDataIDs'); //获取表格的所有列
            for (var i = 0; i < ids.length; i++) {
                $('#jqGrid').jqGrid('restoreRow', ids[i]);
            }
        }

        function doConfirm(id) {
            console.log(id);
            confirmx('你确定要确认吗？',null,function(){
                $.ajax({
                    url:'${ctx}/interfaces/interfaceTask/confirm',
                    type:'post',
                    dataType:'json',
                    data:{id:id},
                    success:function(res){
                        var code = res.code;
                        var message = res.message;
                        layer.msg(message);
                        // 页面跳转回列表页
                        $(window).attr("location","${ctx}/interfaces/interfaceMetadata");
                        <%--$("#btnSave").attr("action", '${ctx}/interfaces/interfaceMetadata');--%>
                        // $('#jqGrid').trigger('reloadGrid');
                    }
                });}
            );
        }

        // $(function() {
        //     $('#btnSubmit').click(function() {
        //         var taskName = $("#taskName").val();
        //         $('#jqGrid').jqGrid('setGridParam', {
        //             datatype : 'json',
        //             postData : {
        //                 taskName:taskName
        //             }
        //         }).trigger('reloadGrid');
        //     });
        //
        // });

        <%--window.onload=function(){--%>
        <%--    console.log(${entity.id});--%>
        <%--    console.log(${entity.taskName});--%>
        <%--};--%>
    </script>

</head>
<body>
<ul class="nav nav-tabs">
    <li class="active"><a href="${ctx}/interfaces/interfaceTask/reportList">监测制度查看</a></li>
</ul>
<div class="jqGrid_wrapper">

    <div class="search_row">
        <div class="col-sm-search">
<%--            &nbsp;&nbsp;&nbsp;<input id="btnSubmit" class="btn btn-sm btn-success" type="button"  value="查询" />--%>
<%--            &nbsp;&nbsp; <input id="btnReset" class="btn btn-sm btn-danger" type="button" value="重 置" />--%>
            <input id="btnConfirm" class="btn btn-sm btn-info" type="button" onclick="doConfirm(${entity.id})" value="确认"/>
           <input id="btnEdit" class="btn btn-sm btn-default" type="button" onclick="startEdit()" value="批量编辑"/>
           <input id="btnSave" class="btn btn-sm btn-success" type="button" onclick="saveDataBatch()" value="批量保存"/>
           <input id="btnCancel" class="btn btn-sm btn-warning" type="button" onclick="cancelEdit()" value="批量取消"/>
           <input id="btnBack" class="btn btn-sm btn-danger" type="button" onclick="location.href='${ctx}/interfaces/interfaceTask/reportList'" value="返回"/>
<%--    <input id="btnView" class="btn btn-sm btn-primary" type="button" onclick="location.href='${ctx}/interfaces/interfaceMetadata/preview?id='+${entity.id}+'&taskName='" value="预览"/>--%>

           <input id="btnView" class="btn btn-sm btn-danger" type="button" onclick="location.href='${ctx}/interfaces/interfaceMetadata/preview?id='+${entity.id}+'&taskName='+encodeURI(encodeURI('${entity.taskName}'))+''" value="预览"/>
<%--        &nbsp;&nbsp; <input id="btnDelete" class="btn btn-sm btn-danger" type="button" onclick="deleteDataBatch()" value="批量删除" />--%>
<%--           <input id="btnTest" class="btn btn-sm btn-danger" type="button" onclick="testP()" value="测试"/>--%>
        </div>
    </div>
    <div class="search_row_split"></div>
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
</div>
</body>
</html>

3.预览页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>预览</title>

    <%@include file="/WEB-INF/views/include/head0.jsp" %>
<%--    <style type="text/css">--%>
<%--        .table {table-layout:fixed;}--%>
<%--    </style>--%>
</head>
<body>
<%--<ul class="nav nav-tabs">--%>
<%--    <li class="active"><a href="${ctx}/interfaces/interfaceTask/reportList">监测制度查看</a></li>--%>
<%--</ul>--%>
<div style="text-align: center;">
    <table class="table table-bordered" border="1" style="margin:auto;height:70%;width: 60%;font-size: 16px; table-layout: fixed;">
        <caption style="text-align: center;font-size: 30px">${entity.taskName}</caption st>
        <tr id="lineDrop">
            <!-- 在这里面动态的添加th标签。 -->
        </tr>
        <tr id="lineTd">
            <!-- 在这里面动态的添加td标签。 -->

        </tr>
    </table>
</div>

<script type="text/javascript">
    // $(document).ready(function() {
    //     init();
    //     init1();
    // });
    $(function () {
        init();
    })
    // $(function () {
    //     init1();
    // })
    window.onload=function () {
        init1();
    }
    function init(){
        $.ajax({
            type:'post',
            dataType: 'json',
            url:'${ctx}/interfaces/interfaceMetadata/getColumn/${entity.id}',
            // data:{},
            success:function (result) {
                // alert(result);// [object Object],[object Object],[object Object],[object Object],,,,,,
                // alert(JSON.stringify(result));// [{"columNname":"监测点","columnWidth":"40"},{"columNname":"监测点1","columnWidth":"50"},{"columNname":"监测点2","columnWidth":"60"},{"columNname":"监测点3","columnWidth":"70"},"","","","","",""]
                // var data = JSON.stringify(result);
                // alert(data.length);// 182
                // alert(result.length);// 10
                // alert(data[0]);// [
                // alert(result[0]);// [object Object]
                var str = "";
                $.each(result, function(idx, obj) {
                    str += "<th id = 'thId' style='text-align: center'>" + obj.columNname + "</th>";
                    // document.getElementById("thId").style.width= "400px";
                });
                // document.getElementsByTagName("th")[0].attributes.style.value = "30px";
                console.log(document.getElementsByTagName("th")[0]);
                console.log(str);
                console.log(${entity.id});
                <%--console.log(${entity.taskName});--%>
                // for (var i = 0; i < 4; i++) {
                //     str += "<tr>" + "<th>" + result[i].columNname + "</th>" + "</tr>";
                // }
                // document.getElementById("lineDrop").innerHTML = str;
                $("#lineDrop").append(str);
            }
        });
    }
    function init1(){
        $.ajax({
            type:'post',
            dataType: 'json',
            url:'${ctx}/interfaces/interfaceMetadata/getColumn/${entity.id}',
            // data:{},
            success:function (result) {
                var data = JSON.stringify(result);
                var str = "";
                var str1 = "";
                $.each(result, function(idx, obj) {
                    // document.getElementsByTagName("th")[0].attributes.style.width =
                    console.log(obj.columnWidth);
                    // alert(result.length);
                    document.getElementsByTagName("th")[idx].attributes.style.value = "text-align: center; width: " + obj.columnWidth + "px";
                });
                for (var i = 0; i < 15; i++) {
                    var str1 = "<tr>";
                    for (var j = 0; j < result.length; j++) {
                        str1 += "<td>&nbsp</td>";
                    }
                    str1 += "</th>";
                    $("table").append(str1);
                }
                // document.getElementsByTagName("th")[0].attributes.style.value = "30px";
                console.log(document.getElementById("lineDrop"));
                console.log(document.getElementsByTagName("th"));

                console.log(document.getElementsByTagName("th")[0].attributes.style.value);
                // console.log(document.getElementsByTagName("th")[0].attributes.style);
                console.log(str);
                console.log(${entity.id});
            }
        });
    }
</script>

<div class="jqGrid_wrapper">

    <div class="search_row_split"></div>
    <div align="center">
        <%--    <a href="${ctx}/interfaces/interfaceMetadata/reportForm?id=${entity.id}&taskName=${entity.taskName}">返回</a>--%>
        <input id="btnBack" class="btn btn-sm btn-default" type="button" onclick="location.href='${ctx}/interfaces/interfaceTask/reportList'" value="返回"/>
        <%--    <input id="btnBack" class="btn btn-sm btn-danger" type="button" onclick="location.href='${ctx}/interfaces/interfaceMetadata/reportForm?id='+${entity.id}+''" value="返回"/>--%>
        <%--    <input id="btnBack" class="btn btn-sm btn-danger" type="button" onclick="location.href='${ctx}/interfaces/interfaceMetadata/reportForm?id='+${entity.id}+'&taskName='+${entity.taskName}+''" value="返回"/>--%>
    </div>
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
</div>

</body>
</html>
上一篇：AWS Kubernetes/k8s kubeamd 初始化后kube-controller-manager pod CrashLoopBackOff 错误启动不了


下一篇：JPA entityManager.createQuery IN