jqgrid默认选中行,点击触发,行内容获取,id获取详细说明,案例地址

    
    //加载表格
    function GetGrid() {
        var queryJson = { anmc: encodeURI($("#anmc").val()) }
        var $gridTable = $("#gridTable");
        $gridTable.jqGrid({
            url:"/dxfServices/anAction.do?method=find_AnByPage",
            postData: { queryJson: JSON.stringify(queryJson) },
            datatype: "json",
            height: $(window).height() - 101,
            colModel: [//常用到的属性:name 列显示的名称;index 传到服务器端用来排序用的列名称;width 列宽度;align 对齐方式;sortable 是否可以排序
		{ label: '主键', name: 'id', index: 'id', width: 80, align: 'left', hidden: true },
		{ label: '按钮图标', name: 'antp', index: 'antp', width: 180, align: 'center',sortable:false ,
			formatter: function (cellvalue, options, rowObject) {
				//return "";
				return "";
			}
		},
		{ label: '按钮名称', name: 'anmc', index: 'anmc', width: 250, align: 'center',sortable:false },
		{ label: '按钮函数', name: 'anhs', index: 'anhs', width: 250, align: 'center',sortable:false },
		{ label: '排序码', name: 'pxm', index: 'pxm', width: 120, align: 'center',sortable:false },
		{ label: '创建时间', name: 'cjsj', index: 'cjsj', width: 250, align: 'center',sortable:false },
		{ label: '按钮描述', name: 'anms', index: 'anms', width: 250, align: 'center',sortable:false }
		],
            viewrecords: true,//定义是否要显示总记录数
            rowNum: 30,//在grid上显示记录条数,这个参数是要被传递到后台
            rowList: [30, 50, 100, 500, 1000],//一个下拉选择框,用来改变显示记录数,当选择时会覆盖rowNum参数传递到后台
            pager: "#gridPager",//定义翻页用的导航栏,必须是有效的html元素。翻页工具栏可以放置在html页面任意位置
            sortname: 'cjsj',//排序列的名称,此参数会被传到后台
            sortorder: 'desc',//排序顺序,升序或者降序(asc or desc)
            rownumbers: true,//如果为ture则会在表格左边新增一列,显示行顺序号,从1开始递增。此列名为'rn'.
            shrinkToFit: false,//此属性用来说明当初始化列宽度时候的计算类型,如果为ture,则按比例初始化列宽度。如果为false,则列宽度使用colModel指定的宽度
            multiselect: true,//定义是否可以多选
            gridview: true,//构造一行数据后添加到grid中,如果设为true则是将整个表格的数据都构造完成后再添加到grid中,但treeGrid, subGrid, or afterInsertRow 不能用
            
            //当选择行时触发此事件。rowid:当前行id;status:选择状态,当multiselect 为true时此参数才可用
            onSelectRow: function () {
            	//返回选中的id
            	selectedRowIndex = $("#" + this.id).getGridParam('selrow');
            	//返回点击这行xlmc的值
                selectedRowValue = $("#gridTable").jqGridRowValue("xlmc");
            },
            
            //当表格所有数据都加载完成而且其他的处理也都完成时触发此事件,排序,翻页同样也会触发此事件
	    gridComplete: function () {
		var ids = new Array();
		//getDataIDs()返回当前grid里所有数据的id
            	ids = $("#" + this.id).getDataIDs();
		//选择或反选指定行。如果onselectrow为ture则会触发事件onSelectRow,onselectrow默认为ture
                $("#" + this.id).setSelection(ids[0], true);
	    }
        });
    }

案例地址:jqGrid实例详情

你可能感兴趣的:([前端])