Архивы WEB - Страница 14 из 54

datatables.net: вынос кнопок экспорта в любое место

07.02.2022 Павел Грибов WEB

Задача: задать местоположение кнопок экспорта, назначить им собственный стиль

Решение:

var buttons = new $.fn.dataTable.Buttons(table, {
         buttons: [
        { text:"Excel",extend: 'excel', className: 'excel_export_style',
            init: function(api, node, config) {
             $(node).removeClass('btn btn-secondary')
            }
    },
        { text:"Print",extend: 'print', className: 'print_export_style',
            init: function(api, node, config) {
                $(node).removeClass('btn btn-secondary')            
            }
        }
      ]
    }).container().appendTo($('#export_buttons'));

var buttons = new $.fn.dataTable.Buttons(table, {

buttons: [

{ text:"Excel",extend: 'excel', className: 'excel_export_style',

init: function(api, node, config) {

$(node).removeClass('btn btn-secondary')

}

{ text:"Print",extend: 'print', className: 'print_export_style',

init: function(api, node, config) {

$(node).removeClass('btn btn-secondary')

}

]

}).container().appendTo($('#export_buttons'));

Оставить комментарий datatbles, javascript

Краткое выделение всей строчки при клике в radiobutton

28.01.2022 Павел Грибов WEB

Проблема обнаруживается в webview приложений на android. А именно, если где-то в коде есть radiobutton обёрнутый чем угодно, то при клике по нему, кратковременно (на долю секунды) выделяется вся строчка целиком.

Решение: достаточно добавить в стилевое оформление этого элемента cursor:default

Update: достаточно применить к body -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

Оставить комментарий android, css, radiobutton, webview

Отрисовка календаря на JavaScript

26.01.2022 Павел Грибов WEB

Задача: нарисовать нечто подобное

Решение:

var days_week = [          
          'Жуть',  
          'Понедельник',
          'Вторник',
          'Среда',
          'Четверг',
          'Пятница',
          'Суббота',
          'Воскресенье',
        ];        
      var month_names=[
        "",  
        "Январь",
        "Февраль",
        "Март",
        "Апрель",
        "Май",
        "Июнь",
        "Июль",
        "Август",
        "Сентябрь",
        "Октябрь",
        "Ноябрь",
        "Декабрь"
      ];
    function GetDayWork(year,month,day){
        dayw=new Date(year, month-1, day).getDay();
        if (dayw==0) return 7;
        return dayw;
    };
    function ReturnToBookingPanel(){
      $(".DateTimePickerForBooking").hide();  
      $(".booking-now").show();
    };
    function GetLastNextCal(month,year,next){
        month=month+next;
        if (month==0){month=12;year--;}
        if (month==13){month=1;year++;}
        PaintBookingMonth(month,year);
    };
    function PaintBookingMonth(month,year){       
       cal_html='';
       cal_html=cal_html+'<div class="calendar_row calendar_row-head">';
       cal_html=cal_html+' <div class="calendar_head-date">'+month_names[month]+' <span>'+year+'</span></div>';
       cal_html=cal_html+'       <div class="calendar_row-head-arrows">';
       cal_html=cal_html+'            <div class="arrow arrow-prev" onclick="GetLastNextCal('+month+','+year+',-1)">';
       cal_html=cal_html+'                  <img src="/img/arr_cal_l.svg">';
       cal_html=cal_html+'            </div>';
       cal_html=cal_html+'            <div class="arrow arrow-next"  onclick="GetLastNextCal('+month+','+year+',1)">';
       cal_html=cal_html+'                  <img src="/img/arr_cal_r.svg">';
       cal_html=cal_html+'           </div>';
       cal_html=cal_html+'       </div>';
       cal_html=cal_html+'</div>'; 
       cal_html=cal_html+'<div class="calendar_row calendar_row-weekdays">';
       cal_html=cal_html+'   <div class="item">Пн</div>';
       cal_html=cal_html+'   <div class="item">Вт</div>';
       cal_html=cal_html+'   <div class="item">Ср</div>';
       cal_html=cal_html+'   <div class="item">Чт</div>';
       cal_html=cal_html+'   <div class="item">Пт</div>';
       cal_html=cal_html+'   <div class="item">Сб</div>';
       cal_html=cal_html+'   <div class="item">Вс</div>';
       cal_html=cal_html+'</div>';

       days = new Date(year, month, 0).getDate() 
       console.log("Дней в месяце:",days);
       // рисуем, пока не кончатся дни
       day=1;
       while (day<=days) {
          cal_html=cal_html+'<div class="calendar_row">';  
          for(let dayw = 1; dayw <= 7; dayw++) {            
            if (GetDayWork(year, month, day)==dayw){               
                if (day>days){
                  console.log("- пропуск");  
                  cal_html=cal_html+'<div class="item"></div>';  
                } else {
                  console.log(day);  
                  available="available";
                  selected="";
                  if (month<(new Date().getMonth()+1)) available=""; //если месяц меньше чем текущий
                  if (month==(new Date().getMonth()+1)){
                      if (day<new Date().getDate()) available="";
                      if (day==new Date().getDate()) selected="selected today";
                  };
                  cal_html=cal_html+'<div id="day_'+year+'_'+month+'_'+day+'" onclick="ChangeDataForBooking('+year+','+month+','+day+')" class="item '+available+' '+selected+'" data-date="'+year+'-'+month+'-'+day+'">'+day+'</div>';
                };               
               day++;
            } else {
              console.log("- пропуск");  
              cal_html=cal_html+'<div class="item"></div>';  
            };          
          };  
          cal_html=cal_html+'</div>'; 
       };       
       cal_html=cal_html+'<div class="booking_date-current_date">';
       cal_html=cal_html+'   Пятница <span>21.01.2022 январь</span>';
       cal_html=cal_html+'</div>';
       $(".booking_date-wrapper").html(cal_html);
    };
    function ChangeDataForBooking(year,month,day){
       console.log("!ChangeDataForBooking",year,month,day); 
       if ($('#day_'+year+'_'+month+'_'+day).hasClass("available")){
         $(".item").removeClass("selected");   
         $('#day_'+year+'_'+month+'_'+day).addClass("selected");
       };
        
    };

100

101

102

103

104

105

106

var days_week = [

'Жуть',

'Понедельник',

'Вторник',

'Среда',

'Четверг',

'Пятница',

'Суббота',

'Воскресенье',

];

var month_names=[

"",

"Январь",

"Февраль",

"Март",

"Апрель",

"Май",

"Июнь",

"Июль",

"Август",

"Сентябрь",

"Октябрь",

"Ноябрь",

"Декабрь"

];

function GetDayWork(year,month,day){

dayw=new Date(year, month-1, day).getDay();

if (dayw==0) return 7;

return dayw;

};

function ReturnToBookingPanel(){

$(".DateTimePickerForBooking").hide();

$(".booking-now").show();

};

function GetLastNextCal(month,year,next){

month=month+next;

if (month==0){month=12;year--;}

if (month==13){month=1;year++;}

PaintBookingMonth(month,year);

};

function PaintBookingMonth(month,year){

cal_html='';

cal_html=cal_html+'<div class="calendar_row calendar_row-head">';

cal_html=cal_html+' <div class="calendar_head-date">'+month_names[month]+' <span>'+year+'</span></div>';

cal_html=cal_html+' <div class="calendar_row-head-arrows">';

cal_html=cal_html+' <div class="arrow arrow-prev" onclick="GetLastNextCal('+month+','+year+',-1)">';

cal_html=cal_html+' <img src="/img/arr_cal_l.svg">';

cal_html=cal_html+' </div>';

cal_html=cal_html+' <div class="arrow arrow-next" onclick="GetLastNextCal('+month+','+year+',1)">';

cal_html=cal_html+' <img src="/img/arr_cal_r.svg">';

cal_html=cal_html+' </div>';

cal_html=cal_html+'</div>';

cal_html=cal_html+'<div class="calendar_row calendar_row-weekdays">';

cal_html=cal_html+' <div class="item">Пн</div>';

cal_html=cal_html+' <div class="item">Вт</div>';

cal_html=cal_html+' <div class="item">Ср</div>';

cal_html=cal_html+' <div class="item">Чт</div>';

cal_html=cal_html+' <div class="item">Пт</div>';

cal_html=cal_html+' <div class="item">Сб</div>';

cal_html=cal_html+' <div class="item">Вс</div>';

cal_html=cal_html+'</div>';

days = new Date(year, month, 0).getDate()

console.log("Дней в месяце:",days);

// рисуем, пока не кончатся дни

day=1;

while (day<=days) {

cal_html=cal_html+'<div class="calendar_row">';

for(let dayw = 1; dayw <= 7; dayw++) {

if (GetDayWork(year, month, day)==dayw){

if (day>days){

console.log("- пропуск");

cal_html=cal_html+'<div class="item"></div>';

} else {

console.log(day);

available="available";

selected="";

if (month<(new Date().getMonth()+1)) available=""; //если месяц меньше чем текущий

if (month==(new Date().getMonth()+1)){

if (day<new Date().getDate()) available="";

if (day==new Date().getDate()) selected="selected today";

};

cal_html=cal_html+'<div id="day_'+year+'_'+month+'_'+day+'" onclick="ChangeDataForBooking('+year+','+month+','+day+')" class="item '+available+' '+selected+'" data-date="'+year+'-'+month+'-'+day+'">'+day+'</div>';

};

day++;

} else {

console.log("- пропуск");

cal_html=cal_html+'<div class="item"></div>';

};

cal_html=cal_html+'</div>';

};

cal_html=cal_html+'<div class="booking_date-current_date">';

cal_html=cal_html+' Пятница <span>21.01.2022 январь</span>';

cal_html=cal_html+'</div>';

$(".booking_date-wrapper").html(cal_html);

};

function ChangeDataForBooking(year,month,day){

console.log("!ChangeDataForBooking",year,month,day);

if ($('#day_'+year+'_'+month+'_'+day).hasClass("available")){

$(".item").removeClass("selected");

$('#day_'+year+'_'+month+'_'+day).addClass("selected");

};

Оставить комментарий javascript, календарь

JavaScript: отслеживание клика вне элемента

22.01.2022 Павел Грибов WEB

Задача: отследить клик вне элемента div.

Решение: для этого навесим событие на клик вышестоящего элемента, и при клике анализируем, то на чём кликнули «внутри» или «снаружи»:

Например:

html:

<div class="el1">
   <div class="el2"></div>
   <div class="el3"></div>
   <div class="el4"></div>
   <div class="el5"></div>



</div>

</div>

javascript:

$(".el1" ).bind( "click", function(e) {
                        if ( $(e.target).closest('.el4').length ) {
                            console.log("внутри");
                        return;
                        };
                        console.log("снаружи");  
                   });

$(".el1" ).bind( "click", function(e) {

if ( $(e.target).closest('.el4').length ) {

console.log("внутри");

return;

};

console.log("снаружи");

});

Оставить комментарий

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

10.12.2021 Павел Грибов WEB

Задача: при щелчке по одной из ячеек, разворачивать «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>

Оставить комментарий childs, datatables, datatables.net, subgrid

« 1 … 12 13 14 15 16 … 54 »

Март 2025
Пн	Вт	Ср	Чт	Пт	Сб	Вс
					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