Архив рубрики: WEB

WEB

Datatables.net: субгриды для таблицы

10.12.2021 Павел Грибов Оставить комментарий

Задача: при щелчке по одной из ячеек, разворачивать «subgrid» для таблицы. Примерно так:

Решение:

<table id="ownersgrid" class="display" style="width:100%">
        <thead>
            <tr>                
                <th>#</th>
                <th></th>
                <th>Наименование</th>
                <th>Полное наименование</th>
                <th>Телефон</th>    
                <th>Email</th> 
                <th>Договора</th>
            </tr>
        </thead>
</table>

<script>
 ownerstable=$('#ownersgrid').DataTable( {
        dom: 'frtipB',
        destroy: true,
        select: true,
        lengthMenu: [
            [ 10, 25, 50, -1 ],
            [ '10 строк', '25 строк', '50 строк', 'Все строки' ]
        ],
        buttons: [            
            {
            text: 'Редактировать',
                action: function ( e, dt, node, config ) {
                  ConnectorEdit("edit");  
                }
            },
            {
            text: 'Добавить',
                action: function ( e, dt, node, config ) {
                  ConnectorEdit("add");  
                }
            },
            
            'excel','print','pageLength',
        ],        
         paging: true,
         keys: true,
         //scrollY:        400,
        //scrollCollapse: true,
        //scroller:       true,         
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/server/owners/OwnersGrid",
            "type": "POST",
            "data": {               
            }
        },
    "language": {
             url: '/js/i18n/datatable.json'
        },        
    "columns": [                    
            { "data": "id"},
            { "data": "deleted" },
            { "data": "name"},
            { "data": "full_name" },
            { "data": "phone" },
            { "data": "email" },
            { className: 'dt-control',orderable: false,data: null,defaultContent: '',width: '10%'},
        ]        
    } );
    $('#ownersgrid').unbind();
    $('#ownersgrid').on('dblclick', 'tbody td', function () {        
         OwnerEdit("edit");
    }); 
    $('#ownersgrid tbody').on('click', 'td.dt-control', function () {
        var tr = $(this).closest('tr');
        var row = ownerstable.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            destroyChild(row);
            tr.removeClass('shown');
        }
        else {
            // Open this row
            createChild(row);
            tr.addClass('shown');
        }
    } );    
function createChild ( row ) {
    // This is the table we'll convert into a DataTable
    var table = $('<table class="display" style="width:100%">'+
        '<thead>'+
        '    <tr>                '+
        '        <th>#</th>'+
        '        <th></th>'+
        '        <th>Наименование</th>'+
        '        <th>Полное наименование</th>'+
        '        <th>Телефон</th>    '+
        '        <th>Email</th> '+
        '        <th>Договора</th>'+
        '    </tr>'+
       ' </thead>'+
    '</table>');


    // Display it the child row
    row.child( table ).show();
 
    // Initialise as a DataTable
    var usersTable = table.DataTable( {
       dom: 't',
        destroy: true,
        select: true,
        lengthMenu: [
            [ 10, 25, 50, -1 ],
            [ '10 строк', '25 строк', '50 строк', 'Все строки' ]
        ],
        buttons: [            
            {
            text: 'Редактировать',
                action: function ( e, dt, node, config ) {
                  ConnectorEdit("edit");  
                }
            },
            {
            text: 'Добавить',
                action: function ( e, dt, node, config ) {
                  ConnectorEdit("add");  
                }
            },
            
            'excel','print','pageLength',
        ],        
         paging: true,
         keys: true,
         //scrollY:        400,
        //scrollCollapse: true,
        //scroller:       true,         
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/server/owners/OwnersGrid",
            "type": "POST",
            "data": {               
            }
        },
    "language": {
             url: '/js/i18n/datatable.json'
        },        
    "columns": [                    
            { "data": "id"},
            { "data": "deleted" },
            { "data": "name"},
            { "data": "full_name" },
            { "data": "phone" },
            { "data": "email" },
            { className: 'dt-control',orderable: false,data: null,defaultContent: '',width: '10%'},
        ]        
    } );
};
function destroyChild(row) {
    var table = $("table", row.child());
    table.detach();
    table.DataTable().destroy();
 
    // And then hide the row
    row.child.hide();
}
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

<thead>

<tr>

<th>Наименование</th>

<th>Полное наименование</th>

<th>Телефон</th>

<th>Email</th>

<th>Договора</th>

</tr>

</thead>

</table>

ownerstable=$('#ownersgrid').DataTable( {

dom: 'frtipB',

destroy: true,

select: true,

lengthMenu: [

[ 10, 25, 50, -1 ],

[ '10 строк', '25 строк', '50 строк', 'Все строки' ]

buttons: [

{

text: 'Редактировать',

action: function ( e, dt, node, config ) {

ConnectorEdit("edit");

}

{

text: 'Добавить',

action: function ( e, dt, node, config ) {

ConnectorEdit("add");

}

'excel','print','pageLength',

paging: true,

keys: true,

//scrollY: 400,

//scrollCollapse: true,

//scroller: true,

"processing": true,

"serverSide": true,

"ajax": {

"url": "/server/owners/OwnersGrid",

"type": "POST",

"data": {

}

"language": {

url: '/js/i18n/datatable.json'

"columns": [

{ "data": "id"},

{ "data": "deleted" },

{ "data": "name"},

{ "data": "full_name" },

{ "data": "phone" },

{ "data": "email" },

{ className: 'dt-control',orderable: false,data: null,defaultContent: '',width: '10%'},

]

} );

$('#ownersgrid').unbind();

$('#ownersgrid').on('dblclick', 'tbody td', function () {

OwnerEdit("edit");

});

$('#ownersgrid tbody').on('click', 'td.dt-control', function () {

var tr = $(this).closest('tr');

var row = ownerstable.row( tr );

if ( row.child.isShown() ) {

// This row is already open - close it

destroyChild(row);

tr.removeClass('shown');

}

else {

// Open this row

createChild(row);

tr.addClass('shown');

}

} );

function createChild ( row ) {

// This is the table we'll convert into a DataTable

var table = $('<table class="display" style="width:100%">'+

'<thead>'+

' <tr> '+

' <th>#</th>'+

' <th></th>'+

' <th>Наименование</th>'+

' <th>Полное наименование</th>'+

' <th>Телефон</th> '+

' <th>Email</th> '+

' <th>Договора</th>'+

' </tr>'+

' </thead>'+

'</table>');

// Display it the child row

row.child( table ).show();

// Initialise as a DataTable

var usersTable = table.DataTable( {

dom: 't',

destroy: true,

select: true,

lengthMenu: [

[ 10, 25, 50, -1 ],

[ '10 строк', '25 строк', '50 строк', 'Все строки' ]

buttons: [

{

text: 'Редактировать',

action: function ( e, dt, node, config ) {

ConnectorEdit("edit");

}

{

text: 'Добавить',

action: function ( e, dt, node, config ) {

ConnectorEdit("add");

}

'excel','print','pageLength',

paging: true,

keys: true,

//scrollY: 400,

//scrollCollapse: true,

//scroller: true,

"processing": true,

"serverSide": true,

"ajax": {

"url": "/server/owners/OwnersGrid",

"type": "POST",

"data": {

}

"language": {

url: '/js/i18n/datatable.json'

"columns": [

{ "data": "id"},

{ "data": "deleted" },

{ "data": "name"},

{ "data": "full_name" },

{ "data": "phone" },

{ "data": "email" },

{ className: 'dt-control',orderable: false,data: null,defaultContent: '',width: '10%'},

]

} );

};

function destroyChild(row) {

var table = $("table", row.child());

table.detach();

table.DataTable().destroy();

// And then hide the row

row.child.hide();

}

</script>

PHP, WEB

Битрикс: Вывод файла в детальном отображении товара

06.12.2021 Павел Грибов Оставить комментарий

Задача: 1) позволять прикреплять инструкцию к товару. 2) Отображать её в товаре, в том случае если файл прикреплен.

Решение:

Добавляем руками новое свойство в информационном блоке «Основной каталог товаров»

2) Открываем шаблон детального отображения товара и добавляем:

В начале файла, заполняем переменную $INCTRUCTION_SRC

<?		
$res = CIBlockElement::GetProperty($arResult['IBLOCK_ID'], $arResult['ID'], "sort", "asc", array("CODE" => "files"));
if ($ob = $res->GetNext())
    {			
$INSTRUCTION_VALUE = $ob['VALUE'];
$file = CFile::GetFileArray($INSTRUCTION_VALUE);
$INSTRUCTION_SRC = $file['SRC'];
    }
?>

$res = CIBlockElement::GetProperty($arResult['IBLOCK_ID'], $arResult['ID'], "sort", "asc", array("CODE" => "files"));

if ($ob = $res->GetNext())

{

$INSTRUCTION_VALUE = $ob['VALUE'];

$file = CFile::GetFileArray($INSTRUCTION_VALUE);

$INSTRUCTION_SRC = $file['SRC'];

}

В нужном месте для вывода добавляем:

<?php
 if ($INSTRUCTION_SRC!=""){
?>
<a href="<?=$INSTRUCTION_SRC;?>">Инструкция</a>
<?php
};
?>

<?php

if ($INSTRUCTION_SRC!=""){

<a href="<?=$INSTRUCTION_SRC;?>">Инструкция</a>

<?php

};

Результат:

WEB

datatables.net: перекашивает заголовок таблицы при переключении между вкладками

29.11.2021 Павел Грибов Оставить комментарий

При переключении между вкладками, иногда шапка таблицы «узежает».

Решение: в момент переключения вкладок, «перерисовываем» шапку:

    $("#tabs").tabs({
	activate: function( event, ui ) { 
		$('#client_pays_grid').dataTable().fnAdjustColumnSizing();
   });

$("#tabs").tabs({

activate: function( event, ui ) {

$('#client_pays_grid').dataTable().fnAdjustColumnSizing();

});

PHP, WEB

Дошли руки до datatables.net

26.11.2021 Павел Грибов Оставить комментарий

Наконец дошли руки до освоения плагина databales.net для работы с таблицами. До этого всё использовал jqgrid. Вот типичный шаблон c выгрузкой в excel, загрузкой данных из json, добавления в POST своих данных, получения id выделенной строки.

HTML:

<table id="clientsgrid" class="display" style="width:100%">
        <thead>
            <tr>
                <th>#</th>
                <th></th>
                <th>Телефон</th>
                <th>ФИО</th>
                <th>Email</th>
                <th>Дата</th>
            </tr>
        </thead>
    </table>

<thead>

<tr>

<th>Телефон</th>

<th>Email</th>

</tr>

</thead>

</table>

Javascript:

 function ClientsGridList(){

    table=$('#clientsgrid').DataTable( {
        dom: 'Bfrtip',
        destroy: true,
        select: true,
        buttons: [
            'excel','print'
        ],        
         paging: true,
         keys: true,
        //scrollY:        200,
        //scrollCollapse: true,
        //scroller:       true,         
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/server/clients/ClientsGrid",
            "type": "POST",
            "data": {
                "owner":owner_select.value,
                "segment":users_groups_array_select.value
            }
        },
    "language": {
             url: '/js/i18n/datatable.json'
        },        
    "columns": [
            { "data": "id"},
            { "data": "deleted" },
            { "data": "phone"},
            { "data": "name" },
            { "data": "email" },
            { "data": "dt"}            
        ]        
    } );
    $('#clientsgrid').unbind();
    $('#clientsgrid').on('dblclick', 'tbody td', function () {
         tr = $(this).closest('tr');
         //console.log(tr);
         row = table.row( tr );
         data=row.data();
         user_id=data.id;         
         DrawCartUser(user_id);
    }); 
   // table.ajax.reload();
  };

function ClientsGridList(){

table=$('#clientsgrid').DataTable( {

dom: 'Bfrtip',

destroy: true,

select: true,

buttons: [

'excel','print'

paging: true,

keys: true,

//scrollY: 200,

//scrollCollapse: true,

//scroller: true,

"processing": true,

"serverSide": true,

"ajax": {

"url": "/server/clients/ClientsGrid",

"type": "POST",

"data": {

"owner":owner_select.value,

"segment":users_groups_array_select.value

}

"language": {

url: '/js/i18n/datatable.json'

"columns": [

{ "data": "id"},

{ "data": "deleted" },

{ "data": "phone"},

{ "data": "name" },

{ "data": "email" },

{ "data": "dt"}

]

} );

$('#clientsgrid').unbind();

$('#clientsgrid').on('dblclick', 'tbody td', function () {

tr = $(this).closest('tr');

//console.log(tr);

row = table.row( tr );

data=row.data();

user_id=data.id;

DrawCartUser(user_id);

});

// table.ajax.reload();

};

PHP:

$owner= _POST("owner"); // владелец (если суперадмин - выводим всех)
$segment= _POST("segment"); // какой сегмент (если -1, выводим всех)
$draw= _POST("draw"); // какая страница
$start= _POST("start"); // с какой записи по счету
$length= _POST("length"); // записей на страницу
$order= _POST("order")[0]["column"]; // по какой колонке сортируем
$order= _POST("columns")[$order]["data"];
$sidx= _POST("order")[0]["dir"]; // способ сортировки
$search_value=_POST("search")["value"]; // что ищем
$search_regex=_POST("search")["regex"]; // регулярка

$res=$Users->GetClientsGrid($Users,$owner,$segment,$start,$length,$order,$sidx,$search_value);    
if ($res->error):
        echo '{"error": "'.$res->errortext.'" }';
        die();
   else:
        $res->result->draw=$draw;
        jsonExit($res->result);
endif;

$owner= _POST("owner"); // владелец (если суперадмин - выводим всех)

$segment= _POST("segment"); // какой сегмент (если -1, выводим всех)

$draw= _POST("draw"); // какая страница

$start= _POST("start"); // с какой записи по счету

$length= _POST("length"); // записей на страницу

$order= _POST("order")[0]["column"]; // по какой колонке сортируем

$order= _POST("columns")[$order]["data"];

$sidx= _POST("order")[0]["dir"]; // способ сортировки

$search_value=_POST("search")["value"]; // что ищем

$search_regex=_POST("search")["regex"]; // регулярка

$res=$Users->GetClientsGrid($Users,$owner,$segment,$start,$length,$order,$sidx,$search_value);

if ($res->error):

echo '{"error": "'.$res->errortext.'" }';

die();

else:

$res->result->draw=$draw;

jsonExit($res->result);

endif;

Ну и получается что то вроде:

WEB

Jqgrid-free: свернуть все остальные развёрнутые субгриды

20.11.2021 Павел Грибов Оставить комментарий

Задача: при развертывании нового субгрида, необходимо чтобы все остальные развернутые — сворачивались.

Решение:

	subGridRowExpanded: function(subgrid_id, row_id) {
                    $("#ezs_list").jqGrid('setSelection', row_id);
                    // свертываем все остальные субгриды
                    var rowIds = $("#ezs_list").getDataIDs();
                        $.each(rowIds, function (index, rowId) {
                            $("#ezs_list").collapseSubGridRow(rowId); 
                        });                    
                    
                    StationsGrid(subgrid_id, row_id);
		},

subGridRowExpanded: function(subgrid_id, row_id) {

$("#ezs_list").jqGrid('setSelection', row_id);

// свертываем все остальные субгриды

var rowIds = $("#ezs_list").getDataIDs();

$.each(rowIds, function (index, rowId) {

$("#ezs_list").collapseSubGridRow(rowId);

});

StationsGrid(subgrid_id, row_id);

ЖЗГ

Архив рубрики: WEB

Datatables.net: субгриды для таблицы

Битрикс: Вывод файла в детальном отображении товара

datatables.net: перекашивает заголовок таблицы при переключении между вкладками

Дошли руки до datatables.net

Jqgrid-free: свернуть все остальные развёрнутые субгриды

Жизнь замечательных грибов

Январь 2022
Пн	Вт	Ср	Чт	Пт	Сб	Вс
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31