您的位置:首页 > 其它

jqGrid 使用示例&获取选中行数据

2017-01-10 18:17 253 查看
jQuery表格使用示例:

$("#cable").jqGrid({

            datatype: "json",

            url: '../../ssss/queryinfo.do,

            //postData:'',

            jsonReader : {
//数据
root : "responseData.datas",
//当前页
total : "responseData.totalPageNums",
//总行数
records : "responseData.totalRecordNums",
//行id
id:'courseId'
},

            mtype: "POST",

//          height: '100%', /*表格窗体高度*/

            height: $(window).height() - $(".top-height").height() - 110, /*表格窗体高度*/

            autowidth: true,

//            如果为ture时,则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变,为了使表格宽度能够自动调整则需要实现函数:setGridWidth

            shrinkToFit: true, /* 自适应*/

            rowNum: 10, /*每页显示多少条信息*//*在grid上显示记录条数,这个参数是要被传递到后台*/

            rowList: [10, 20, 50, 100, 200], /*可选择显示的条数*//*一个下拉选择框,用来改变显示记录数,当选择时会覆盖rowNum参数传递到后台*/

            colNames: ["标题",, "操作"],

            colModel: [/*每列的属性*/

//                常用到的属性:name 列显示的名称;index 传到服务器端用来排序用的列名称;width 列宽度;align 对齐方式;sortable 是否可以排序

                {

            name: 'courseName',

            index: 'courseName',

            width: 100,

            sortable: false,

            formatter: function(cellvalue, options, rowObject) {

             

            if (cellvalue != null && cellvalue != '') {

             

            return "<a class='title-a'>" + cellvalue + "</a><p>分类:技能操作类</p>";

            }

               

        }

            },

                {

                name: 'courseId',

                index: 'courseId',

                width: 60,

                align: 'center',

                sortable: false,
formatter: function(cellvalue, options, rowObject) {

           
var divHtml = getOperationColumnDiv(cellvalue);
           

           
return divHtml;
           }

           
4000
    }

            ],

            pager: "#pager_list_1",

//            定义翻页用的导航栏,必须是有效的html元素。翻页工具栏可以放置在html页面任意位置

            viewrecords: true, /*定义是否要显示总记录数*/

//            caption: "jqGrid 示例1",  表格名称

            hidegrid: false, /*启用或者禁用控制表格显示、隐藏的按钮,只有当caption 属性不为空时起效*/

            multiselect: true,//去掉复选框

            rownumbers: true, //显示序号

            editable:true,
        });

     获取选中行的ID:$("#cable").jqGrid('getGridParam','selarrrow');$("#courseInfoTable").jqGrid('getGridParam','selarrrow');

     附:API地址:http://blog.mn886.net/jqGrid/     
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: