jqgrid-工具栏文本-这是一个好方法吗? [英] jqgrid - toolbar text - is this a good way of doing it?

查看:48
本文介绍了jqgrid-工具栏文本-这是一个好方法吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在JSON响应中指定了userdata.取决于title属性的值

I have specified userdata in JSON response. Depending on the value of the title property,

  • 标题将更改以反映title属性的值
  • 工具栏中的文本(在网格标题和数据表标题之间)将发生变化
  • the caption will change to reflect the value of the title property
  • the text in the toolbar (between the grid caption and data table headers) will change

HTML

<table id="myjqgrid"></table>
<div id="Pager"></div>  

JSON

{
    "colModel": [
        {
            "name": "ID",
            "label": "ID",
            "width": 60,
            "align": "left",
            "jsonmap": "cells.0.value",
            "sortable": true      
        },
        {
            "name": "FirstName",
            "label": "FirstName",
            "width": 100,
            "align": "left",
            "jsonmap": "cells.1.value",
            "sortable": false       
        },
        {
            "name": "LastName",
            "label": "LastName",
            "width": 100,
            "align": "left",
            "jsonmap": "cells.2.value",
            "sortable": false       
        }
    ],
    "colNames": [
        "ID",
        "FirstName",
        "LastName"
    ],
    "mypage": {
        "outerwrapper": {
            "page":"1",
            "total":"1",
            "records":"20",
            "innerwrapper": {
                "rows":[
                    {
                        "id":"1",
                        "cells":
                        [               
                            {
                                "value":"12345",
                                "label": "ID"                       
                            },
                            {
                                "value":"David",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Smith",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    },
                    {
                        "id":"2",
                        "cells":
                        [               
                           {
                                "value":"37546",
                                "label": "ID"                       
                            },
                            {
                                "value":"Willy",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Peacock",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    },
                    {
                        "id":"3",
                        "cells":
                        [               
                            {
                                "value":"62345",
                                "label": "ID"                       
                            },
                            {
                                "value":"Kim",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Holmes",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    },
                    {
                        "id":"4",
                        "cells":
                        [      
                            {
                                "value":"186034",
                                "label": "ID"                       
                            },
                            {
                                "value":"Andy",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Wills",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    },
                    {
                        "id":"5",
                        "cells":
                        [              
                            {
                                "value":"67345",
                                "label": "ID"                       
                            },
                            {
                                "value":"Paul",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Lawrence",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    },
                    {
                        "id":"6",
                        "cells":
                        [              
                            {
                                "value":"12906",
                                "label": "ID"                       
                            },
                            {
                                "value":"Andy",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Charlery",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    },
                    {
                        "id":"7",
                        "cells":
                        [              
                            {
                                "value":"564565",
                                "label": "ID"                       
                            },
                            {
                                "value":"Bets",
                                "label": "FirstName"    
                            },
                            {                           
                                "value":"Josilyn",
                                "label": "LastName"                         
                            }                                                                                       
                        ]       
                    }
                ],
                "userdata": {
                    "title": "My Title 1"     // this can be 'My Title 1' or 'My Title 2'                   
                }
            }
        }
    }
}

JQGrid定义

$(document).ready(function () { 
    $.ajax({
        type: "GET",
        url: "myjqgrid.json",
        data: "",
        dataType: "json",
        success: function(response){
            var columnData = response.mypage.outerwrapper,
                columnNames = response.colNames,
                columnModel = response.colModel;

            $("#myjqgrid").jqGrid({
                datatype: 'jsonstring',
                datastr: columnData,                
                colNames: columnNames,
                colModel: columnModel,
                jsonReader: {
                    root: "innerwrapper.rows", 
                    userdata: "innerwrapper.userdata",             
                    repeatitems: false
                },
                gridview: true,
                pager: "#Pager",
                rowNum: 21,
                rowList: [21],
                viewrecords: true,              
                recordpos: 'left',
                multiboxonly: true,
                multiselect: true,
                width: "1406",      
                height: "auto",
                loadonce: true, 
                toolbar: [true,"top"],  
                loadComplete: function(){
                    var userdata = $("#myjqgrid").jqGrid('getGridParam', 'userData');
                    if (userdata) {
                        if (userdata.title) {
                            $("#myjqgrid").jqGrid('setCaption', userdata.title);
                        }
                    }
                    if (userdata.title === "My Title 1") {
                        $("div#t_myjqgrid").append("Viewing the Records.");
                    } else if (userdata.title === "My Title 2") {
                        $("div#t_myjqgrid").append("Editing the Records.");
                    }
                }
            });
            $("#myjqgrid").jqGrid('navGrid','#Pager', {add:false, edit:false, del:false, position: 'right'});
        }
    });
});

我的问题是

这是更改div#t_myjqgrid内容的正确方法吗?还是jqgrid提供了我可以使用的属性/方法/事件?

Is this the right way of changing the content of div#t_myjqgrid? Or does jqgrid offer a property/method/event that I can use?

推荐答案

jqGrid的toolbar选项没有更改内容顶部或底部工具栏的方法,但是您可以使用setCaption设置网格标题(标题).对代码进行小的修改的演示使用以下loadComplete :

There are no methods for changing of content top or bottom toolbars added by toolbar option of jqGrid, but you can use setCaption to set grid caption (title). The small modified demo of your code uses the following loadComplete:

loadComplete: function () {
    var $this = $(this), userdata = $this.jqGrid('getGridParam', 'userData');
    if (userdata && userdata.title) {
        $this.jqGrid('setCaption', userdata.title);
    }
    if (userdata.title === "My Title 1") {
        $this.jqGrid('setCaption', "Viewing the Records.");
        $('#t_' + $.jgrid.jqID(this.id))
            .append('<div style="margin: 0.3em">Viewing the Records.</div>');
    } else if (userdata.title === "My Title 2") {
        $this.jqGrid('setCaption', "Editing the Records.");
        $('#t_' + $.jgrid.jqID(this.id))
            .append('<div style="margin: 0.3em">Editing the Records.</div>');
    }
}

如果网格的id(在您的情况下为"myjqgrid")包含某些

The usage of $.jgrid.jqID(this.id) instead of this.id is helpful in the case if the id of the grid (in you case 'myjqgrid') contains some meta-characters.

这篇关于jqgrid-工具栏文本-这是一个好方法吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆