在同一列中制作文本和按钮

Question

<div style="margin-left:20px">
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>


    <br /><br />

    <input class="btn btn-default" type="button" value="Get Selected Rows" onclick="getSelectedRows()" /> 
     <input class="btn btn-default" type="button" value="Save All Rows" onclick="saveAllRows()" />
     <input class="btn btn-default" type="button" value="Get Changed Rows" onclick="getChangedRows()" />
    <br /><br /> 
</div>

伙计们，我正在使用 jqgrid，我想在同一列中创建一个可编辑的文本区域和一个按钮，但是这个文本区域从 json 对象加载数据。这是我的代码

 $(document).ready(function () {
            $("#jqGrid").jqGrid({
                data: data.rows,
                datatype: "local",
                styleUI : "Bootstrap",
                colModel: [
                           { label: 'Order ID', name: 'OrderID', key: true, width: 75, hidden:true },                   
                 
                        
                           { label: 'Customer ID', name: 'CustomerID', width: 150, editable : true, edittype:"textarea"},
                         
      
                       ],
                  
    //..... other parameters 
                  
                loadComplete: function () {
                    var $this = $(this), ids = $this.jqGrid('getDataIDs'), i;
                  for (i = ids.length - 1; i >= 0 ; i--) {
                    }
                 for(var i=0;i < ids.length;i++)
                 {
                     var cl = ids[i]; 
                     be = "<input style='height:25px;width:50px;' type='text''   />"; 
                     se = "<input style='height:22px;width:40px;' type='button' value='..'  />";  
                     jQuery("#jqGrid").jqGrid('setRowData',ids[i],{CustomerID:be+se}); 
                     }
           
                }
            });
            ;
            
           

            
        });

它似乎不包含来自 json 的数据...有什么帮助吗？？

Answer 1

在您的加载完成后尝试从网格行数据中获取文本值的 json 值并将其设置为您的文本区域值。我假设 CustomerID 是您在文本区域中想要的

              loadComplete: function () {
                    var $this = $(this), ids = $this.jqGrid('getDataIDs'), i;
                    for (i = ids.length - 1; i >= 0 ; i--) {
                    }
                 for(var i=0;i < ids.length;i++)
                 {
                     var cl = ids[i]; 

                   var rowId = $this.jqGrid('getRowData',cl);
                   var custIdValue = rowId['CustomerID']; // 

                     be = "<input style='height:25px;width:50px;' type='text'' value='"+custIdValue '+"/>"; 

                     se = "<input style='height:22px;width:40px;' type='button' value='..'  />";  
                     jQuery("#jqGrid").jqGrid('setRowData',ids[i],{CustomerID:be+se}); 
                     }

                }

在同一列中制作文本和按钮

making text and button in same column

javascript

jquery

json

jqgrid