jqgrid 相关

写在前面

欢迎留言，1944276952，一起讨论。

引入

https://blog.mn886.net/jqGrid/，有样例，

<link rel="stylesheet" href="jqgrid/css/ui.jqgrid.css"/>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.src.js"></script>

初始化

function GetGrid() {
    var $gridTable = $('#gridTable');
    $gridTable.jqGrid({
        url: "/systemBuilding/codeMaintain/list",
        datatype: "json",
        height: $(window).height() - 110,
        autowidth: true,
        colModel: [
            {
                label: '有效标识',//显示的表头
                name: 'is_enable',//传回来的属性
                width: 80,
                align: "center",//对齐方式
                sortable: false,//是否可以排序
                title: false,//当鼠标悬停时显示的内容
                formatter: function (val, obj, row, act) {//这个的函数可以控制内容，val是当前的内容，row是当前的行对象，可以通过他取得别的列，
                    var actions = [];
                    if (row.is_enable == "1") {
                        actions.push('有效');
                    } else if (row.is_enable == "0") {
                        actions.push('禁用');
                    }
                    return actions.join('');
                }
            }
        ],
       viewrecords: true,
        rowNum: 15,//每页显示多少数据
        rowList: [15, 30, 50],//选择每页多少数据的选项
        pager: "#gridPager",//这里的divId用于显示分页的信息
        rownumbers: true,//显示行号
        shrinkToFit: false,//当设置width和autowidth后，如果表格宽度小于可以显示的宽度则按照比例计算列宽度。
        gridview: true,
 //       multiselect : true,//允许多选
        onSelectRow: function () {
            selectedRowIndex = $("#" + this.id).getGridParam('selrow');//用于点击时存储选中的行号
        },
        gridComplete: function () {
            $("#" + this.id).setSelection(selectedRowIndex, false);
             $(this).closest('.ui-jqgrid-view').find('div.ui-jqgrid-hdiv').hide()；//用于隐藏表头
        }
    });

取数据

var rowid=$("#gridTable").jqGrid("getGridParam","selrow");   //取得选中行的id
 var rowData=$("#gridTable").jqGrid("getRowData",rowid);//根据id取得行对象
 var strValue=$("#gridTable").jqGrid("getCell",rowIds[i],"reportedId");//根据行id和列名取得数据
 var documentId = $("#gridTable").jqGridRowValue("reportedId");//获取选中行的某一个数据
 $("#gridTable").trigger("reloadGrid");//刷新列表
 var ids=obj.getDataIDs();//取得所有行的行号，ids是一个数组
var obj=$("#tablename").jqGrid("getRowData");//取得所有行对象，obj是一个数组，根据ids或者obj.length 遍历取得每一个行对象。

编辑行和列

1：需要编辑的单元格上加上editable : true,
2：整个grid上加上editable : true,
3： onSelectRow : function(row) {
selectedRowIndex = $("#" + this.id).getGridParam(
‘selrow’);
EditSelectRow(selectedRowIndex);
}
4：增加编辑方法 function EditSelectRow(id) {
var oldid = $("#jqid").val();
if (oldid != id) {
//这里结束上一次选中行的编辑
$("#gridTable2").jqGrid(‘saveRow’, oldid);
}
$("#jqid").val(id);
//这里设置新的一行开启编辑
$("#gridTable2").jqGrid(‘editRow’, id, {
keys : true,
focusField : 1
});
}

表格重新加载

$("#gridTable2").jqGrid().trigger("reloadGrid");		
$("#gridTable2").jqGrid('clearGridData');//清空表格

行拖拽

//实现行拖拽  
    $("#gridTable").jqGrid('sortableRows', {  
  items : '.jqgrow:not(.unsortable)'  
    });