在JqGrid表格中自动生成按钮

1、在js中的jqGrid中下如下代码,自动生成按钮主要是colModel中最后一个name

jQuery("#table1").jqGrid(

            {
            url:"userManageSelect.html",
            datatype: "json",
            mtpe:'post',
            height:'100%',
            colNames:['1','2','3, '4','5 ','6,'7','8','操作'],
            colModel:[ //描述列信息的数组
            {name:'id',index:'id', width:70,hidedlg:true,hidden:true},//id对应数据库中wxuserid,不可以修改有应用
            {name:'username',index:'username', width:70,align:"center"},
            {name:'usex',index:'sex', width:50,align:"center"},
            {name:'phone',index:'phone', width:70,align:"center"},  //phone对应数据库中的id,不可以修改
            {name:'ucardid',index:'ucardid', width:110,align:"center"},
            {name:'jcardid',index:'jcardid', width:110, align:"center"},
            {name:'jtype',index:'jtype', width:50,align:"center"},
            {name:'jfirst',index:'jfirst', width:80, align:"center"},
            {    name : 'sy',
                width : 150,
                align : "center",
                formatter: function (value, grid, rows, state) {
                    var df=rows.id;
                    var ddd = "password('" + df + "')";
                    var ccc = "date('" + df + "')";
                    var fff = "term('" + df + "')";
                return '<input id="yu'+ df+ '" type="button" name="Submit" value="初始密码"  onclick="'+ ddd + '"/>'
                +'&nbsp;&nbsp;'
                +'<input id="yu'+ df+ '" type="button" name="Submit" value="修改资料" onclick="'+ ccc + '"/>'
                +'&nbsp;&nbsp;'
                +'<input id="yu'+ df+ '" type="button" name="Submit" value="查询报名情况" onclick="'+ fff + '"/>'
                ; }
            }
            ],
            
            rowNum : 20,//这个参数指定了jqGrid显示行数,默认值20。,这个参数是要被传递到后台
            rowList : [ 20, 30, 40,50],//一个下拉选择框,用来改变显示记录数,当选择时会覆盖rowNum参数传递到后台
            pager:'#page1',        
            jsonReader : {//jsonReader用于设置如何解析从Server端发回来的json数据。
                root : "data.list",
                page : "data.curPage",//当前页
                total : "data.totalPage",////总页数
                records : "data.totalCount",//总记录数
                repeatitems : false// repeatitems如果设为false,则jqGrid在解析json时,会根据name来搜索对应的数据元素(即可以json中元素可以不按顺序);而所使用的name是来自于colModel中的name设定。
            },
            viewrecords : true,//定义是否要显示总记录数
            forceFit : true,//当为ture时,调整列宽度不会改变表格的宽度。当shrinkToFit 为false时,此属性会被忽略
            autowidth : true,// setGridWidth这个方法可以使表格跟着父容器变化            
            caption:"用户管理" ,
            loadtext:"loading...",

            });




2、在$(document).ready(function(){

});外面定义相应的方法,在方法中写点击事件



//表格1中初始化密码按钮方法
            function password(id) {
                    var rowData = $("#table1").jqGrid('getRowData', id);
                    $("#userid1").val(rowData.id);
                    $("#username1").val(rowData.username);
                    $("#password_window").window("open");        
            }
            
//表格1修改资料按钮方法
            function date(id) {
            var rowData = $("#table1").jqGrid('getRowData', id);
                    $("#userid").val(rowData.id);
                    $("#username").val(rowData.username);
                    $("#usex").val(rowData.usex);
                    $("#phone").html(rowData.phone);
                    $("#ucardid").val(rowData.ucardid);
                    $("#jcardid").val(rowData.jcardid);
                    $("#jtype").val(rowData.jtype);
                    $("#jfirst").val(rowData.jfirst);
                    $("#date_window").window("open");
            
            }

猜你喜欢

转载自blog.csdn.net/weixin_37380784/article/details/80735133