Hi jarry.
Ohh i see. Just use the options
Thanks
EasyUI
Home | Help | Search | Login | Register |
1
on: June 11, 2025, 11:03:38 PM
|
||
Started by jega - Last post by jega | ||
Hi jarry.
Ohh i see. Just use the options Thanks |
2
on: June 11, 2025, 05:01:00 AM
|
||
Started by jega - Last post by jarry | ||
Call the code below will recreate the datagrid again.
Code: $('#dgList').datagrid({ You can set the 'title' property while creating the datagrid.singleSelect:true }); Code: $('#dgList').datagrid({ title: '...', singleSelect:true }); If you only want to change the selecting mode, please set the 'singleSelect' property instead of recreating the whole datagrid again. Code: $('#dgList').datagrid('options').singleSelect=true; |
3
on: June 09, 2025, 02:41:21 PM
|
||
Started by jega - Last post by jega | ||
Any help ??
|
4
on: June 09, 2025, 03:19:00 AM
|
||
Started by Aod47 - Last post by jarry | ||
Please override the 'renderRow' method of the scrollview.
Code: $.extend(scrollview, { renderRow: function (target, fields, frozen, rowIndex, rowData) { var opts = $.data(target, 'datagrid').options; var cc = []; if (frozen && opts.rownumbers) { var rownumber = rowIndex + 1; cc.push('<td class="datagrid-td-rownumber" style="height:50px"><div class="datagrid-cell-rownumber">' + rownumber + '</div></td>'); } if (!frozen) { cc.push('<td colspan=' + fields.length + ' style="padding:1px 10px 1px 10px;border:0;height:50px;width:360px !important;">'); cc.push('<div class="dash">'); cc.push('<table style="width:100%;border:none;border-collapse:collapse;">'); cc.push('<tr>'); cc.push('<td style="border:0">' + rowData['name'] + '</td>') cc.push('</tr>'); cc.push('</table>'); cc.push('</div>'); } cc.push('</td>'); return cc.join(''); } }) |
5
on: June 02, 2025, 11:27:46 PM
|
||
Started by Aod47 - Last post by Aod47 | ||
Could you please provide an example of using Datagrid Scrollview + Cardview together? I tried creating a Datagrid Cardview first and added the data-options with view:scrollview, but it didn't work.
ps. I successfully created a Datagrid Scrollview with remote load. Code: <table id="GridPanel1" border="false" data-options="view:scrollview,singleSelect:true,rownumbers:true,pageSize:50,idField:'GID',autoRowHeight:false,showHeader:false"> <thead> <tr> <th data-options="field:'GID',hidden:false">GID</th> <th data-options="field:'product',hidden:true,width:'20%'">Product</th> <th data-options="field:'short_title',hidden:true,width:'20%'">Title</th> <th data-options="field:'published',hidden:true,width:'10%'">Publish</th> <th data-options="field:'authors',hidden:true,width:'20%'">Author</th> <th data-options="field:'quote',hidden:true,width:'10%'">Quote</th> <th data-options="field:'PNV',hidden:true,width:'10%'">PNV</th> </tr> </thead> </table> Code: var cardview = $.extend({}, $.fn.datagrid.defaults.view, { renderFooter: function (target, container, frozen) { var opts = $.data(target, 'datagrid').options; var rows = $.data(target, 'datagrid').footer || []; var fields = $(target).datagrid('getColumnFields', frozen); var table = ['<table class="datagrid-ftable" cellspacing="0" cellpadding="0" border="0"><tbody>']; for (var i = 0; i < rows.length; i++) { var styleValue = opts.rowStyler ? opts.rowStyler.call(target, i, rows[i]) : ''; var style = styleValue ? 'style="' + styleValue + '"' : ''; table.push('<tr class="datagrid-row" datagrid-row-index="' + i + '"' + style + '>'); table.push(this.renderRow.call(this, target, fields, frozen, i, rows[i])); table.push('</tr>'); } table.push('</tbody></table>'); $(container).html(table.join('')); }, renderRow: function (target, fields, frozen, rowIndex, rowData) { var cc = []; cc.push('<td colspan=' + fields.length + ' style="padding:1px 10px 1px 10px;border:0;width:360px !important;">'); if (!frozen && rowData.GID) { cc.push('<div class="dash">'); cc.push('<table style="width:100%;border:none;border-collapse:collapse;">'); cc.push('<tr>'); ....... cc.push('</tr>'); cc.push('</table>'); cc.push('</div>'); } cc.push('</td>'); return cc.join(''); } }); |
6
on: May 24, 2025, 06:21:35 AM
|
||
Started by btork - Last post by jarry | ||
Define the 'styler' function to set the CSS styles for the column.
Code: <script> function mystyler(){ return 'background:#ddd' } </script> <table id="tg" title="Folder Browser" class="easyui-treegrid" style="width:700px;height:250px" data-options=" data:data, rownumbers: true, idField: 'id', treeField: 'name' "> <thead> <tr> <th data-options="field:'name',styler:mystyler" width="220">Name</th> <th data-options="field:'size'" width="100" align="right">Size</th> <th data-options="field:'date'" width="150">Modified Date</th> </tr> </thead> </table> |
7
on: May 24, 2025, 06:16:45 AM
|
||
Started by btork - Last post by jarry | ||
Add the CSS style to hide the expanding/collapsing icon on the treegrid.
Code: <style> .mytg .tree-hit{ display: none; } </style> And then listen to the 'onClickRow' event, call the 'toggle' method to expand or collapse the node. Code: $('#tg').treegrid({ cls: 'mytg', onClickRow: function(row){ $(this).treegrid('toggle',row.id) } }) |
8
on: May 22, 2025, 05:14:20 PM
|
||
Started by btork - Last post by btork | ||
How do I change the background color for a column?
|
9
on: May 22, 2025, 10:51:26 AM
|
||
Started by btork - Last post by btork | ||
I have a treegrid and i want the child rows to be smaller. Can i change the row height to smaller for just the child rows?
-btork |
10
on: May 21, 2025, 09:05:19 PM
|
||
Started by btork - Last post by btork | ||
Hello,
I want to hide the expand icon for a treegrid for the entire table. I want the user to be able to expand by clicking on the entire row. Is this possible? -btork |