ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

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

2021-01-21 11:29:04  阅读：243  来源： 互联网

标签：jQuery function 插件 jqGrid ids var true id


OSCHINA
jqGrid demos

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

在这里插入图片描述
这里简单记录一下，也不整理了。

文章目录

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);
    }

成品：
在这里插入图片描述

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>

标签：jQuery,function,插件,jqGrid,ids,var,true,id
来源： https://blog.csdn.net/weixin_42426714/article/details/112918807

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有