Javascriptxinetdの罠コマンドプロンプトのログを取る(完結)コマンドラインで権限昇格を起こす(UAC)今更ながら大文字・小文字。ここにきて、カンタンなグリッドを表示する仕事があって、それならセルの内容を書き換えるだけの簡易的なセル編集機能もあればなぁ、と家に帰ってから唐突に思いつき、テレビを見ながら数時間ぐらいで突貫工事で作った。仕様的には・・・(1)Excelファイル(もしくはUTF-8なCSVファイル)をブラウザに読込み、(2)簡単なグリッドビュー表示を行い、(3)セルをクリックしたら編集し、(4)リターンキー押下で編集確定、(5)エスケープキーで編集取消という感じ。これならHTMLとCSS、JavaScriptで百数十行ぐらいでいけそうです。実際業務で使うには、変更内容を追跡し、サーバーへ送信してデータベースに反映して・・・というような事が考えられますが・・・そこまでやっとれん!wまずは、見てくれ、画面デザインですが、あくまでサンプル的なものなので、ほとんど素のHTMLです。CSSのGridなんて初めて書いてみました。ライブラリを利用しました。セルを結合しまくったりしてるような複雑なエクセルファイルとか読み込むとたぶん滅茶苦茶になります。いう複雑なエクセルファイルを持っていないので試していないんだけど・・・デモ画面はこちらCSS自体はそんなに凝ったことしてないので、読めば大体やろうとしていることが分かるでしょう。ほとんど各種イベントの処理ぐらいで、これといって特筆するべき事はありません。使って見苦しいのですが・・・jQueryだと明らかにタイプ量が減るので僕は多用しています。なんてタイプするのがすんげぇ面倒。タイプするのがアホらしくなりますけどね、オッサンは。ローカルのエクセルファイルを選択して疑似グリッドビュー編集を行う。A1:Z10のような形式でセルが使用されている範囲が入っています。row/column形式にデコードする必要があります。いうような構造になっているようです。grid-template-columnsプロパティの値を決めてあげます。各行をオブジェクト(object)ではなく配列(array)に変換するオプションです。<table>要素を使えばもっと簡単になったけど、敢えてイバラの道を進みます。グリッドのセルを埋めていきます。}})(jQuery);いつも利用させてもらってる疑似テストデータを利用してエクセルデータを流し込んでやると、こんな感じです。「こんな感じです」って言われてもね。いちおう、エクセルファイルから簡易グリッドビューにデータを流し込み最低限の編集はできるようになりました。・・・が、グリッドのHTML的な構造は見直す必要がありますよねぇ。....延々とセルが続く</div>一つの要素(div.row.body)にすべてのセル(span.cell)を全部詰め込んで無理くりCSSでグリッド表示させてるだけなんで、<table>要素みたいに、行で分かれていないので、任意の行を選択したいときは、いちいち計算しないといけません。ま、ちょっとだけグリッド表示したい、って時に使う用、と割り切る。SheetJSコメントするどうしてもWindows10の起動サウンドを鳴らしたいTweet期限が迫っているのに、どーでもいいことが気になって時間食ってしまう💦どーでもいいプログラムを書く時間です。