トップ 差分 一覧 ソース 検索 ヘルプ PDF RSS ログイン

CSS メモ

html帳票

まだ

[printa4.css]

HTML {
//    font-size: 62.5%      // 10px   (16px * 0.625 = 10px)
}
BODY {
    color: red;
//     -webkit-transform: scale(0.8);
//     -webkit-transform-origin:0 0;
    font-size: 8px;
}
@page {
    size: A4 landscape;
    margin: 10px 10px 10px 10px;
}
@media screen {
    body {
        background: #eee;
        font-size: 62.5%;
    }
    .sheet {
       background: white;
       box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
       margin: 5mm;
    }
}
.sheet {
    page-break-after: always;
    margin: 5px 5px 5px 20px;
}
.overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
TABLE {
    border-collapse: collapse;
}

[layouts/defrwt.html.ep]

<!DOCTYPE html>                                                                                                                                 
<html>
 <head><title><%= title %></title>
   <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <%= stylesheet '/css/printa4.css' %>
 </head>
 <body>
     <%= content %>
 </body>
</html>

[templates/rwt/print_main.html.ep]

% layout 'defrwt';
% title $title ;

<%
   $self->sth($self->rwt_prepare($self->sql));
   $self->sth->execute();
   my $init_sw = 0;
   while(my $ref = $self->rwt_dataget){
       $self->rskip(0);
       $self->endsw(0);
       $self->rwt_tisel($ref);
       if($self->endsw != 0 or $self->page_count > $self->end_page){
           last;
       }
       next if($self->rskip == 1);
       $self->rwt_data_save($ref) if($init_sw == 0);
       $init_sw = 1;

       $self->break_check($ref);
       $self->rwt_dtail($ref);
       $self->rwt_dtail_opt($ref);
       $self->rwt_print_dt($ref);
       $self->rwt_sumry($ref);
       $self->rwt_sumcomp($ref);
       $self->head_print(0);
%>
        <%== $self->c_get() %>
<%
       $self->rwt_data_save($ref);
   }
   $self->break_level(0);
   $self->break_routine(0);
   $self->footer(99);
%>
    <%== $self->c_get() %>

[controller/Rwt.pm]

package Tool::mmt::Controller::Rwt;
use Mojo::Base 'Tool::mmt::Controller::Mmt';
use Mojo::Util qw(slurp);
use Encode qw/ decode decode_utf8 encode encode_utf8/;

has contents => "";
has line_count => 0;
has page_count => 0;
has page => 0;
has max_line => 37;
has restart_page => 1;
has end_page => 10000;
has rskip => 0;
has endsw => 0;
has break_level => -1;
has head_print => 0;
has head_line => sub {[]};
has line => sub {[]};
has sth => "";
has sql =>"";
has ref => sub {{}};
has oref => sub {{}};
has bottom_const => "<div align=right>powered by perl-mojolicious</div>";
has column => 1;
has title => "";
has print_form => "rwt/print_main";
has item_list => sub {[]};
has lf_spec => sub {{}};
has break_ctl => sub {[
            {
                level => 99,
                key => '項目名',
                _bef => 0,      # 前改行
                _aft => 0,      # 後改行
                '項目１' => 0,    # 0: sumry
                '項目２' => '小計' # コンスタント
            },
    ]};

my $line; 
my $dbh;
#my $oref = "";

sub print_main {
    my $s = shift;
    $dbh = $s->app->model->webdb->dbh;
    $s->rwt_init;
    $s->_rwt_init;
    #$s->stash->{contents} = $s->rwt_start();
    $s->render($s->print_form);
}
sub rwt_init{
    my $s = shift;
    $s->item_list([]);
}
sub _rwt_init{
    my $s = shift;
    $s->stash->{title} = "rwt sample";
    if($s->sql eq ""){
        if($s->param('table') ne ''){
            $s->sql(qq{select * from @{[$s->param('table')]}});
        }else{
            $s->sql("select * from M_KBN");
        }
    }

    $s->sth($s->rwt_prepare($s->sql));

    $s->title($s->title||$s->param('title')||$s->param('table')||'title');
    $s->line_count(0);
    $s->page_count(0);
#    @{$s->item_list} = map { encode_utf8($_) } @{$s->item_list};
    if(@{$s->item_list} == 0){
        $s->item_list([@{$s->sth->{NAME}}]);
    }

}
sub rwt_start{
    my $s = shift;
    $s->sth($s->rwt_prepare($s->sql));
    $s->sth->execute();
    while(my $ref = $s->rwt_dataget){
        $s->rskip(0);
        $s->endsw(0);
        $s->rwt_tisel($ref);
        if($s->endsw != 0 or $s->page_count > $s->end_page){
            last;
        }
        next if($s->rskip == 1);
        $s->rwt_data_save($ref) if($s->oref == "");

        $s->break_check($ref);
        $s->rwt_dtail($ref);
        $s->rwt_dtail_opt($ref);
        $s->rwt_print_dt($ref);
        $s->rwt_sumry($ref);
        $s->rwt_sumcomp($ref);
        $s->head_print(0);
    }
    $s->break_level(99);
    $s->break_routine(99);
    $s->footer(99);
    return $s->c_get();
}
sub _bottom_print{
    my $s = shift;
    $s->printout("</table>");
    $s->bottom_print();
    $s->printout("</section>");
}
sub bottom_print{
    my $s = shift;
    $s->printout($s->bottom_const) if($s->bottom_const);
}
sub break_check{
    my $s = shift;
    my $ref = shift;
    my $level = 99;


    if($s->line_count > $s->max_line or $s->line_count == 0){
        $s->rwt_head_print();
    }

    my $oref = $s->oref;
    my $i = -1;
    for my $break_control (@{$s->break_ctl}){
        $i++;
        $level = $break_control->{level};

        my $log = Mojo::Log->new();
        $log->debug($break_control->{key}
            . ":" . $ref->{$break_control->{key}}
            . " old:" . $s->dumper ($oref->{$break_control->{key}})
        );
        if ($ref->{$break_control->{key}} ne 
            $oref->{$break_control->{key}}){
                   $s->break_routine($i);
                   last;
        }
    }
}
sub break_routine{
    my $s = shift;
    my $i = shift;
    for (my $j = @{$s->break_ctl} - 1;$j>=$i;$j--){
        $s->rwt_print_levelset($j);
        $s->rwt_print_level($j);
    }
}
sub rwt_print_levelset{
    my $s = shift;
    my $i = shift;
    my $ctl = $s->break_ctl->[$i];
    $line = "<tr>";
    for (@{$s->item_list}) {
        if (exists($ctl->{$_})){
            $line .= $s->set_lf_spec($ctl->{$_},$_);
           if ($ctl->{$_} =~ m/^[0-9\-\+\.]+$/){
               $ctl->{$_} = 0;
           }
        }else{
            $line .= "<td>&nbsp;</td>";
        }
    }
    $line .= "</tr>";
}
sub rwt_print_level{
    my $s = shift;
    my $i = shift;
    $s->printout($line);
    $s->line_count($s->line_count+1)
}
sub rwt_dtail_opt{
    my $s = shift;
}
sub rwt_dtail_bef{
    my $s = shift;
}
sub rwt_dtail{
    my $s = shift;
    my $ref = shift;
    $s->rwt_dtail_bef($ref);

    $s->line->[0] = "<tr>";
    for (@{$s->item_list}) {
        #$s->line->[0] .= qq{<td class="overflow" style="width:200px;max-width:200px">$ref->{$_}</td>};
        #$s->line->[0] .= qq{<td class="overflow" >$ref->{$_}</td>};
        $s->line->[0] .= $s->set_lf_spec($ref->{$_},$_);
    }
    $s->line->[0] .= "</tr>";
}
sub set_lf_spec{
    my $s = shift;
    my $r = shift;
    my $name = shift;
    my $item = "<td ";
    $item .= qq{class="};
    $item .= exists($s->lf_spec->{$name}->{class})  ?
               $s->lf_spec->{$name}->{class}
               :"overflow";
    $item .= qq{" };
    $item .= qq{style="};
    $item .= exists($s->lf_spec->{$name}->{style}) ? 
               $s->lf_spec->{$name}->{style}
               :"width:200px;max-width:200px";
    $item .= qq{">@{[$s->edit($r,$s->lf_spec->{$name}->{edit})]}</td>};
    return $item;
}
sub edit{
    my $s = shift;
    my $data = shift;
    my $edit = shift;
    $data = sprintf($edit->[1],$data) if $edit->[1];
    if ($edit->[0] & hex("04")){
       1 while $data =~ s/(.*\d)(\d\d\d)/$1,$2/;
    }
    if ($edit->[0] & hex("02")){
       $data = "" if($data == 0)
    }
    return $data;
}
sub group_inji{
}
sub rwt_sumry{
}
sub rwt_sumcomp{
    my $s = shift;
    my $ref = shift;
    for my $ctl (@{$s->break_ctl}){
       for (@{$s->sth->{NAME}}){
           if (exists($ctl->{$_}) and $ctl->{$_} =~ m/^[0-9\-\+\.]+$/){
               $ctl->{$_} += $ref->{$_};
           }
       }
    }
}
sub rwt_print_dt{
    my $s = shift;
    my $ref = shift;
    for(@{$s->line}){
        if($s->line_count > $s->max_line){
            $s->line_count(0);
            $s->rwt_head_print();
        }
        $s->printout($_);
        $s->line_count($s->line_count + 1);
    }
}
sub rwt_feed{
    my $s = shift;
    $s->line_count($s->max_line + 1);
}
sub rwt_head_print{
    my $s = shift;
    $s->head();
    if ($s->column > 1){
       my $colwidth = sprintf("width=%d%%",int(100/$s->column));
       my $mod = $s->page_count % $s->column;
       if ($mod == 1){
          if ($s->page_count != 1){
               $s->_bottom_print();
          }    
          $s->printout($s->head_line->[0]);
          $s->printout(qq{<table width=100%><tr>});
       }else{
           #   $s->printout(qq{</td>});
       } 
       $s->printout(qq{<td $colwidth aligin=center style="vertical-align:top">});
    }
    my $i = 0;
    for(@{$s->head_line}){
        if ($i == 0 and $s->column > 1){
        }else{
           $s->printout($_);
        }
        $i++;
    }
}
sub printout{
    my $s = shift;
    if($s->page < $s->restart_page){
        return;
    }
    if($s->page > $s->end_page){
        return;
    }
    $s->c_set(shift);
}


        
        
sub rwt_prepare{
    my $s = shift;
    return $dbh->prepare($s->sql);
}
sub rwt_dataget{
    my $s = shift;
    return $s->sth->fetchrow_hashref();
}
sub rwt_tisel{
    my $s = shift;
}
sub rwt_data_save{
    my $s = shift;
    my $ref = shift;
    $s->oref({});
    my $oref = {};
    for (@{$s->sth->{NAME}}){
        $oref->{$_} = $ref->{$_};
    }
    $s->oref($oref);
}

sub head{
    my $s = shift;
    $s->footer();
    $s->page_count($s->page_count + 1);
    if ($s->column > 1) {
       $s->page(int($s->page_count / $s->column) + 1);
    }else{
       $s->page($s->page_count);
    }
    $s->head_line->[0] = qq{<section class="sheet">};
    $s->head_line->[0] .= qq{
<table width=100%>
<tr>
<td width=30%></td>
<td width=40% align=center><h1>@{[$s->title]}</h1></td>
<td width=30% align=right>page:@{[$s->page]}</td>
</tr></table>};

    $s->head_line->[1] = "<table border=1><tr>";
    for (@{$s->item_list}) {
        #$s->head_line->[1] .= qq{<th class="overflow" >@{[decode_utf8($_)]}</th>};
        $s->head_line->[1] .= qq{<th class="overflow" >$_</th>};
    }   
    $s->head_line->[1] .= "</tr>";
    $s->line_count(1);
}
sub footer{
    my $s = shift;
    my $level = shift||0;
    return if ($s->page_count == 0);

    $s->feed();
    if ($s->column > 1){
        $s->printout("</table></td>");
        if ($s->page_count % $s->column == 0){
            $s->printout("</tr>");
        }
        if ($level == 99 ){
           $s->_bottom_print();
        }
    }else{
        $s->_bottom_print();
   }
}
sub feed{
    my $s = shift;
    my $feed_count = shift || $s->max_line - $s->line_count + 1;
    $feed_count =  $feed_count < 0 ? $s->max_line + $feed_count + 1
                                   : $s->line_count + $feed_count; 
    my $count = $s->line_count;
    for(;$count < $feed_count ; $count++){
        if($s->line_count > $s->max_line or $s->line_count == 0){
                last;
#               $s->rwt_head_print();
        }
        $s->printout(qq{<tr><td>&nbsp;</td>} .
                     "<td></td>" x (@{$s->item_list} - 1) .
                     qq{</tr>});
        $s->line_count($s->line_count+1)
    }

}
sub c_set{
    my $s = shift;
    my $t = shift;
    $s->contents($s->contents . $t . "\n");
}
sub c_get{
    my $s = shift;
	my $text = $s->contents;
    $s->contents("");
    return $text;
}


1;


[list001.pm]


https://oshiete.goo.ne.jp/qa/7461877.htmlと同様の問題で日本語項目名の内容を取得できない
package Tool::mmt::Controller::List001;
use Mojo::Base 'Tool::mmt::Controller::Rwt';

sub rwt_init{
    my $s = shift;
    $s->title('業務単位マスタリスト(種類順) ');
    $s->sql(q{
        select
           TANI_GYOMU_CD as 単位業務CD
           ,TANI_GYOMU_MEI as 単位業務名
           ,GYOMU_NAIYO as 業務名 
           ,GYOMU_SHURUI as 種類
        from 
           M_TANI_GYOMU
        order by 種類,単位業務CD
        });
    $s->column(2);
    $s->item_list([qw/種類 単位業務CD 単位業務名 業務名/]); 
    $s->lf_spec->{種類}->{style} = "width:20px;text-align:center";
    $s->lf_spec->{業務名}->{style} = "width:400px;max-width:400px;";
    $s->lf_spec->{金額}->{edit} = [hex("A5"),"%.2f"];
}
1;

 CSSメモ


親要素の背景色を継承する


background-color: inherit;

CSS で指定幅を超えた文字列を切り取り「…」を付加する方法


monopocket blog
p.overflow {
  width: 200px;
  max-width:200px;        /* うまく「…」が表示されない場合 max-widthを追加する */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

フレームとツリー


Yahoo! UIのTreeViewを使う2で教えてもらったTree表示のcssとjsのセットです。JSONの配列だけ作ればその他はそのままで使えます。
【サンプル画面】
モーダル画面もどき


【サンプル画面】
#modal-overlay{
    z-index:1;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.25);
} 

           function openModal(url){
               if($("#modal-overlay")[0]) {
                   $("#modal-overlay").fadeOut("slow",function(){
                       $("#modal-overlay").remove() ;
                   });
                   return;
               }
               //オーバーレイ用のHTMLコードを、[body]内の最後に生成する
               var text = (function() {/*                                                                    
<div id="modal-overlay" align=center>
  <br><br><br><br>
  <iframe width=75% height=75% top=10px src='+url+'>
  </iframe>
  <p align="center">
  <input type="button" onclick="openModal();" value="CLOSE">
</div>
*/}).toString().replace(/(\n)/g, '').replace(/\+url\+/,url).split('*')[1];

               $("body").append(text);

               //[$modal-overlay]をフェードインさせる
               $("#modal-overlay").fadeIn("slow");
           }

チョットお洒落なラジオボタン


ラジオボタンを非表示にして選択したラベルの色が変わるラジオボタンとチェックボックス
【サンプル画面】
    

  • html

    • 

<h4>パネルのラジオボタン (サンプル)</h4>
<div class="radioPanel">
    <input type="radio" name="s3" id="select1" value="1" checked="">
    <label for="select1">perl</label>
    <input type="radio" name="s3" id="select2" value="2">
    <label for="select2">ruby</label>
    <input type="radio" name="s3" id="select3" value="3">
    <label for="select3">python</label>
    <input type="radio" name="s3" id="select4" value="4">
    <label for="select4">php</label>
    <input type="radio" name="s3" id="select5" value="5">
    <label for="select5">C</label>
</div>
<br><br>
<h4>パネルのチェックボックス (サンプル)</h4>
<div class="radioPanel">
    <input type="checkbox" name="s4" id="select11" value="1" checked="">
    <label for="select11">perl</label>
    <input type="checkbox" name="s4" id="select12" value="2">
    <label for="select12">ruby</label>
    <input type="checkbox" name="s4" id="select13" value="3">
    <label for="select13">python</label>
    <input type="checkbox" name="s4" id="select14" value="4">
    <label for="select14">php</label>
    <input type="checkbox" name="s4" id="select15" value="5">
    <label for="select15">C</label>
</div><br><br><br><hr>

    

  • css

    • 

/* ラジオボタンを非表示にする */
.radioPanel input{
    display: none;
}
/* ラベルのスタイル */
.radioPanel label{
    display: block;
    float: left;
    cursor: pointer;
    width: 80px;
    margin: 0;
    padding: 12px 5px;
    border-right: 1px solid #000000;
    background: #bdc3c7;
    color: #555e64;
    font-size: 14px; 
    text-align: center;
    line-height: 1;
    transition: .2s;
}
/* チェックされた時のスタイル*/
.radioPanel input[type="checkbox"]:checked + label,
.radioPanel input[type="radio"]:checked + label {
    background-color: #a1b91d;
    color: #fff;
    border-right: 1px solid #000000;
    background-image: url(reten.png);
    background-size: 20px;
    background-position: right top;
    background-repeat: no-repeat;
}
/* マウスオーバーした時のスタイル */
.radioPanel label:hover{
    background-color: #a9a9a9;
}
/* 角を丸くする*/
.radioPanel label:first-of-type{
    border-radius: 3px 0 0 3px;
}
.radioPanel label:last-of-type{
    border-right: 0px;
    border-radius: 0 3px 3px 0;
} 

カレンダー


卓上カレンダー
print <<END;
<style>
.sun{color:RED;}
.sat{color:BLUE;}
.holi{color:RED;}
</style>
END
use webdb;
$s = new webdb;
$feed = '';
for(1 .. 12){
$cal = $s->cal_disp_2(y=>2007,m=>$_,d=>1);
$cal =~ s/border=1/border=0 width=300px height=300px/;
$cal =~ s/曜日//;
print <<END;
<p style='background:url("http://image.kansai.com/kdc/10605/9V3Y_wVM.jpg")  no-repeat right top;width: 140mm;height:95mm;$feed'>
END
$feed = 'page-break-before: always;';
print "2007年 $_月<br>\n";
print $cal,"<br></p>\n";
}


      

    

    
      
        

          


        

      
    
  


  




  
  
  
  
  
  Powered by FreeStyleWiki3.5.7
    with Perl5.020003
  
  



  
    

    

      
メニュー


最新


2024/4/14
2023/3/14
2022/12/17
2022/11/13
2022/7/9
検索



キーワード 
 AND  OR