jqGrid参数详解威尼斯人 - 威尼斯人

jqGrid参数详解威尼斯人

2019年02月16日09时27分41秒 | 作者: 向彤 | 标签: 格局,按钮,类型 | 浏览: 17664

· }).navGrid(#gridpager,{view:true, del:false},

· {}, // use default settings for edit

· {}, // use default settings for add

· {}, // delete instead that del:false we need this

· {multipleSearch : true}, // enable the advanced searching

· {closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/

· );

Jqgrid学习 -自界说按钮

jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters});

jQuery("#grid_id").jqGrid(navGrid,"#pager",...).jqGrid(navButtonAdd,"#pager",{parameters});

{ caption:"NewButton", buttonicon:"ui-icon-newwin", onClickButton:null, position: "last", title:"", cursor: "pointer"}

caption:按钮称号,能够为空,string类型
buttonicon:按钮的图标,string类型,有必要为UI theme图标
onClickButton:按钮事情,function类型,默许null
position:first或许last,按钮方位
title:string类型,按钮的提示信息
cursor:string类型,光标类型,默许为pointer
id:string类型,按钮id

假设设置多个按钮:

· jQuery("#grid_id")

· .navGrid(#pager,{edit:false,add:false,del:false,search:false})

· .navButtonAdd(#pager,{

· caption:"Add",

· buttonicon:"ui-icon-add",

· onClickButton: function(){

· alert("Adding Row");

· },

· position:"last"

· })

· .navButtonAdd(#pager,{

· caption:"Del",

· buttonicon:"ui-icon-del",

· onClickButton: function(){

· alert("Deleting Row");

· },

· position:"last"

· });

按钮间的分隔

jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters}).navSeparatorAdd("#pager",{separator_parameters}};

默许参数:

{sepclass : “ui-separator”,sepcontent: }

 

sepclass:ui-jqgrid的特点名
sepcontent:分隔符的内容.

Jqgrid学习 -格局化

jqGrid的格局化是界说在语言包中

· $jgrid = {

· ...

· formatter : {

· integer : {thousandsSeparator: " ", defaultValue: 0},

· number : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: 0.00},

· currency : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix:"", defaultValue: 0.00},

· date : {

· dayNames: [

· "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat",

· "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"

· ],

· monthNames: [

· "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",

· "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"

· ],

· AmPm : ["am","pm","AM","PM"],

· S: function (j) {return j 11 || j 13 ? [st, nd, rd, th][Math.min((j - 1) % 10, 3)] : th},

· srcformat: Y-m-d,

· newformat: d/m/Y,

· masks : {

· ISO8601Long:"Y-m-d H:i:s",

· ISO8601Short:"Y-m-d",

· ShortDate: "n/j/Y",

· LongDate: "l, F d, Y",

· FullDateTime: "l, F d, Y g:i:s A",

· MonthDay: "F d",

· ShortTime: "g:i A",

· LongTime: "g:i:s A",

· SortableDateTime: "Y-m-d\\TH:i:s",

· UniversalSortableDateTime: "Y-m-d H:i:sO",

· YearMonth: "F, Y"

· },

· reformatAfterEdit : false

· },

· baseLinkUrl: ,

· showAction: ,

· target: ,

· checkbox : {disabled:true},

· idName : id

· }

· ...

这些设置能够经过colModel中的formatoptions参数修正

· jQuery("#grid_id").jqGrid({

· ...

· colModel : [

· ...

· {name:myname, ... formatter:number, ...},

· ...

· ],

· ...

· });

此实例是对名为“myname”的列进行格局化,格局化类是“number”,假设初始值为“1234.1”则格局化后显现为“1 234.10” 。

假设给某列进行格局化:

· jQuery("#grid_id").jqGrid({

· ...

· colModel : [

· ...

· {name:myname, ... formatter:currency, formatoptions:{decimalSeparator:",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "} } ,

· ...

· ],

· ...

· });

这个设置会掩盖语言包中的设置。

 

select类型的格局化实例:

原始数据

· jQuery("#grid_id").jqGrid({

· ...

· colModel : [ {name:myname, edittype:select, editoptions:{value:"1:One;2:Two"}} ... ],

· ...

· });

运用格局化后

· jQuery("#grid_id").jqGrid({

· ...

· colModel : [ {name:myname, edittype:select, formatter:select, editoptions:{value:"1:One;2:Two"}} ... ]

· ...

· });

结果是,表格的数据值为1或许2可是实践的是One或许Two。

对超链接运用select类型的格局化:

· jQuery("#grid_id").jqGrid({

· ...

· colModel: [ {name:myname, edittype:select, formatter:select, formatoptions:{baseLinkUrl:someurl.php, addParam: action=edit}, ...}

· ...

· ]

· ...

· });

得到http://localhost/someurl.php?id=123 action=edit

假设想改动id值则

· jQuery("#grid_id").jqGrid({

· ...

· colModel: [ {name:myname, edittype:select, formatter:select, formatoptions:{baseLinkUrl:someurl.php, addParam: action=edit, idName:myid}, ...}

· ...

· ]

· ...

· });

得到http://localhost/someurl.php?myid=123 action=edit

 

Jqgrid学习 -自界说格局化

· jQuery("#grid_id").jqGrid({

· ...

· colModel: [

· ...

· {name:price, index:price, width:60, align:"center", editable: true, formatter:currencyFmatter},

· ...

· ]

· ...

· });

·

· function currencyFmatter (cellvalue, options, rowObject)

· {

· // do something here

· return new_format_value

· }

cellvalue:要被格局化的值
options:对数据进行格局化时的参数设置,格局为:
{ rowId: rid, colModel: cm}
rowObject:行数据

 

数据的反格局化跟格局化用法类似.

· jQuery("#grid_id").jqGrid({

· ...

· colModel: [

· ...

· {name:price, index:price, width:60, align:"center", editable: true, formatter:currencyFmatter, unformat:unformatCurrency},

· ...

· ]

· ...

· });

·

· function currencyFmatter (cellvalue, options, rowObject)

· {

·

· return "$"+cellvalue;

· }

· function unformatCurrency (cellvalue, options)

· {

·

· return cellvalue.replace("$","");

· }

表格中数据实践值为123.00,可是显现的是$123.00; 咱们运用getRowData ,getCell 办法获得的值是123.00。
创立通用的格局化函数

· script type="text/javascript"

· jQuery.extend($.fn.fmatter , {

· currencyFmatter : function(cellvalue, options, rowdata) {

· return "$"+cellvalue;

· }

· });

· jQuery.extend($.fn.fmatter.currencyFmatter , {

· unformat : function(cellvalue, options) {

· return cellvalue.replace("$","");

· }

· });

·

· /script

详细运用:

· jQuery("#grid_id").jqGrid({

· ...

· colModel: [

· ...

· {name:price, index:price, width:60, align:"center", editable: true, formatter:currencyFmatter},

· ...

· ]

· ...

· })

Jqgrid学习 -查找

表格中所有的列都能够作为查找条件。
所用到的语言包文件

· $.jgrid = {

· ...

· search : {

· caption: "Search...",

· Find: "Find",

· Reset: "Reset",

· odata : [equal, not equal, less, less or equal,greater,greater or equal, begins with,does not begin with,is in,is not in,ends with,does not end with,contains,does not contain],

· groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ],

· matchText: " match",

· rulesText: " rules"

· }

colModel 设置

版权声明
本文来源于网络,版权归原作者所有,其内容与观点不代表威尼斯人立场。转载文章仅为传播更有价值的信息,如采编人员采编有误或者版权原因,请与我们联系,我们核实后立即修改或删除。

猜您喜欢的文章

阅读排行

  • 1
  • 2

    单点登录威尼斯人

    协议,加密,事务
  • 3

    jqGrid参数详解威尼斯人

    格局,按钮,类型
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

    hibernate缓存csdn

    数据,目标,运用
  • 10

    组合优于承继快报

    承继,目标,子类