jqgrid viewGridRow对话框大跨度和图标 [英] jqgrid viewGridRow dialog big span and icon
问题描述
我有一个JQGRID与一些数据和Id喜欢显示行数据在对话框中，当用户双击该行。
使用：
ondblClickRow：function（rowid）{
jQuery（this）.jqGrid 'viewGridRow'，rowid）;
}
但我有2个问题：
1：我在其中一个字段中有一个图标，当它显示在对话框中时，它的位置被弄乱了（见下图）。
2：我在最后一个字段中有一个长文本（最多150个字符）。对话框显示它在一个长的跨度，它创建一个水平滚动条。我想让它显示文本在几行或像一个textarea的东西，所以它创建一个垂直滚动条。
已经尝试过：
afterShowForm：function（form）{form.css（width，fixed ）; }
但它没有工作。
我想的是获得相同的样式editGridRow，但只是类似视图。
任何人都知道我该如何解决这个问题？
编辑：
**
< script type =text / javascript>
$（function（）{
jQuery（＃gridJson）。jqGrid（{
url：'Consulta_Dados_Ultimos.asp'，
datatype ：json，
colNames：['N°'，'Data'，'Valor'，'Obs'，'Status']，
colModel：[
{name：'num_solicit_vale '，align：'center'，sorttype：'int'，width：80}，
{name：'data_solicit_vale'，index：'data_solicit_vale'，width：95，align：'center' sorttype：'date'，
formatter：'date'，formatoptions：{srcformat：'d / m / YH：i'，newformat：'d / m / YH：i'}}，
{name：'valor'，index：'valor'，width：80，align：'left'，formatter：'currencyFmatter'}，
{name：'obs_solicit_vale '，sortable：false，width：240}，
{name：'status_solicit_vale'，index：'status_solicit_vale'，width：80，formatter：'iconFmatter'}
]，
rowNum： 10，
rowList：[10,20,30]，
rownumbers：true，
pager：'#pager'，
sortname：'data_solicit_vale'，
viewrecords ：true，
sortorder：desc，
loadonce：true，
gridview：true，
hidegrid：false，
height：230，
autowidth ：'100％'，
shrinkToFit：false，
viewrecords：true，
caption：Consulta Solicitacao Vale Transporte，
jsonReader：{
repeatitems：
root：rows，
total：total，
records：records，
id：idsolicit_vale
}，
ondblClickRow ：function（rowid）{
jQuery（this）.jqGrid（'viewGridRow'，rowid）;
}
}）;
jQuery（＃gridJson）。jqGrid（'navGrid'，'#pager'，{edit：false，add：false，del：false}
}）;
回到表格：
< table id =gridJson/>
< thead>
< tr align =center>
< th> NUM个SOLICIT< / th>
< th> VALOR< / th>
< th> OBS< / th>
< th>个状态< / th>
< th>资料SOLICIT< / th>
< / tr>
< / thead>
< / table>
< div id =pager>< / div>
IMAGE：和。您只需选择带有长文本的行即可显示视图表单。
I have a JQGRID with some data and Id like to show the row data in a dialog when the users double clicks the row. Did that with:
ondblClickRow: function(rowid) {
jQuery(this).jqGrid('viewGridRow', rowid);
}
But I had 2 problems with that:
1: I have an icon in one of the fields and when it shows in the dialog, its position is messed up(see pic below).
2: I have a long text(150 char maximum) in the last field. The dialog is showing it in a long span and it creates an horizontal scroll bar. I wanted it to show the text in a couple of lines or something like a textarea so it creates a vertical scroll bar. Already tried this:
afterShowForm: function(form) { form.css("width", "fixed"); }
But it didnt work.
I was thinking about getting the same styling of "editGridRow" but something like view only. But it didnt work out too.
Anyone got any idea about how can I solve that?
**
EDIT:
**
Sorry guys, heres how I fill the Grid!
<script type="text/javascript">
$(function() {
jQuery("#gridJson").jqGrid({
url:'Consulta_Dados_Ultimos.asp',
datatype: "json",
colNames:['N°','Data','Valor','Obs','Status'],
colModel:[
{name:'num_solicit_vale', align:'center', sorttype:'int', width:80},
{name:'data_solicit_vale',index:'data_solicit_vale',width:95,align:'center',sorttype:'date',
formatter:'date',formatoptions: {srcformat:'d/m/Y H:i', newformat:'d/m/Y H:i'}},
{name:'valor',index:'valor',width:80, align:'left', formatter:'currencyFmatter'},
{name:'obs_solicit_vale', sortable:false, width:240},
{name:'status_solicit_vale',index:'status_solicit_vale',width:80, formatter:'iconFmatter'}
],
rowNum:10,
rowList: [10,20,30],
rownumbers:true,
pager: '#pager',
sortname: 'data_solicit_vale',
viewrecords: true,
sortorder: "desc",
loadonce: true,
gridview: true,
hidegrid: false,
height: 230,
autowidth: '100%',
shrinkToFit: false,
viewrecords: true,
caption:"Consulta Solicitacao Vale Transporte",
jsonReader: {
repeatitems: false,
root: "rows",
total: "total",
records: "records",
id: "idsolicit_vale"
},
ondblClickRow: function(rowid) {
jQuery(this).jqGrid('viewGridRow', rowid);
}
});
jQuery("#gridJson").jqGrid('navGrid', '#pager', {edit:false,add:false,del:false});
});
Heres the table:
<table id="gridJson"/>
<thead>
<tr align="center">
<th>NUM SOLICIT</th>
<th>VALOR</th>
<th>OBS</th>
<th>STATUS</th>
<th>DATA SOLICIT</th>
</tr>
</thead>
</table>
<div id="pager"></div>
IMAGE : http://i.stack.imgur.com/dphDB.jpg
**
EDIT:
**
Solved those issues but the icon is going weird in internet explorer 8. Here's the code of the icon:
<div class="ui-state-attention ui-corner-all" style="display:table">
<span class="ui-icon ui-icon-alert" title="Aguardando"></span>
</div>
ICON IN FIREFOX : ICON IN IE8:
The View form will be displayed as a HTML table. About wrapping of the text in the table you can read this and this old answers.
In case of View form you can use for example the following CSS style
div.ui-jqdialog-content td.form-view-data {
white-space: normal !important;
height: auto;
vertical-align: middle;
padding-top: 3px; padding-bottom: 3px
}
In the case the view form with long data can look like
The problem with the wrong left float in the first line of long text will be clear if you examine the corresponding HTML code. You will see at the beginning of every cell with the data. The empty cell has <span> </span> as the HTML contain. I am not sure whether it's a bug that will be inserted twice, but in case of wrapping of the text the is not good. It can be removed for example with the following code:
beforeShowForm: function ($form){
$form.find("td.DataTD").each(function () {
var html = $(this).html(); // <span> </span>
if (html.substr(0, 6) === " ") {
$(this).html(html.substr(6));
}
});
}
The demo shows that after the above changes the long text will be displayed good enough:
You don't post how you fill the icons from the Status column. I hope, that after the above changes the icon will be look better. If you will still have any problem you can examine the HTML code from the corresponding cell (you can include alert(html) in the code of beforeShowForm) and modify the code so that it will be displayed better.
You can find the demo which I wrote for the answer here. You need just select the row with the long text to display the view form.
这篇关于jqgrid viewGridRow对话框大跨度和图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
