ホームページ > 記事 > ウェブフロントエンド > レイウイテーブルに写真を表示する方法
レイウイテーブルに写真を表示する方法
- 藏色散人オリジナル
- 2020-11-19 11:09:599470ブラウズ
layui テーブルに画像を表示する方法: まず、HTML コードに table タグ、id、lay-filter を配置し、次に、js コードでカスタム テンプレート関数を使用して論理処理を実装し、最後に文字列を宣言します。 type 変数は、画像の名前を受け取るために使用されます。
layUI チュートリアル 」
1. 達成される効果
2. コード
HTML コード
HTML コードは他のテーブルと同様で、適切な場所にテーブル タグを配置し、両方の ID を記述するだけです。そしてレイフィルター。そのまま上がってください。 
JS コード
JS コードでは、picture 列が他の列と異なる点を除いて、他の列は基本的に同様です。書かれた固定列も他の列とは異なる必要があることを確認してください。まずはドライバーの写真欄についてお話しましょう。このコラムではカスタムテンプレート（テンプレート）の機能を利用しています。この機能を使用すると、論理処理を実行し、生データを他の形式に変換できます。もちろん、ここではデータ変換は使用しませんでした。ここでは、この関数を使用していくつかのスタイルを追加するだけです。 
layui.use(['table', 'layer'], function () {
layuiTable = layui.table;
layer = layui.layer;
tabDriver = layuiTable.render({
elem: "#tabDriver",
cellMinWidth: 100,
height: 'full-200',
cols: [[
{ type: 'checkbox', align: "center", fixed: "left", style: "height:110px;"},
{ type: 'numbers', title: "序号", align: "center", fixed: "left", style: "height:110px;" },
{ field: 'DriverID', title: 'DriverID', hide: true },
{ field: 'PassengerCarID', title: 'PassengerCarID', hide: true },
{ field: 'DriverPicture', title: '驾驶员照片', align: "center", templet: "#imgtmp" },
{ field: 'DriverCode', title: '驾驶员编号', align: "center", width: 120 },
{ field: 'DirverName', title: '姓名', align: "center" },
{ field: 'DriverSex', title: '性别', align: "center" },
{ field: 'DriverMovePhone', title: '联系电话', align: "center", width: 130 },
{ field: 'DriverIDNum', title: '身份证号', align: "center", width: 175 },
{ field: 'OccupationalNumber', title: '从业资格证号', align: "center", width: 120 },
{ field: 'PassengerCarCode', title: '驾驶车辆编号', align: "center", width: 120 },
{ field: 'DriverNumber', title: '驾驶证号', align: "center", width: 100 },
{ field: 'DrivingType', title: '准驾车型', align: "center", width: 100 },
{ field: 'StrDrivingDay', title: '驾驶证审验期', align: "center", width: 120 },
{ field: 'StrOccupationalDay', title: '从业资格证审验期', align: "center", width: 150 },
{ field: 'strSGZUseLifes', title: '上岗证有效期', align: "center", width: 150 },
{ field: 'DriverRemark', title: '备注', align: "center" },
{ title: '操作', templet: setOperate, width: 100, align: "center", fixed: "right", style: "height:110px;" },
]],
page: {
limit: 10,//指定每页显示条数
limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
},
data: [],
toolbar: "#toolbarDemo",
});
//监听事件
layuiTable.on('row(tabDriver)', function (obj) {
//标中选中样式
obj.tr.addClass("layui-table-click").siblings().removeClass("layui-table-click");
//选中行，勾选复选框
obj.tr.find("p.layui-unselect.layui-form-checkbox")[1].click();
});
});カスタム テンプレート (テンプレート) ここで、カスタム テンプレートを記述する方法は非常に簡単です。最も外側のレイヤーは script タグで囲まれています。script タグのタイプは text/html で、ID は imgtep です。(ここでの ID は、layui テーブルのドライバーの写真の列にあるテンプレットの ID と一致している必要があります) ）。 script タグ内で img タグを使用してドライバーの写真を表示し、img タグに固定の幅と高さを与えます。このうち、src 内の {
{d.DriverPicture}} は、データベースからクエリされた対応するピクチャのパスを表します。 (ここでのデータベースは対応する画像のパスを保存し、対応する画像はプロジェクト内の特別なフォルダーに保存されます。バイナリで保存された画像を使用する代わりに。バイナリを使用して画像を保存する場合は、クエリ後にデータを処理する必要があります。変換.) 
固定列がlayuiデータテーブルに設定されている場合
対応する固定列にスタイルを追加し、これらの固定列の高さを設定します。 
コントローラー側でいくつかのクエリを書くのが面倒なので、まず、HttpPostedFileBase で受け取った名前をコントローラー メソッドで使用します。渡された画像情報を受け取ります。注: 受信する名前は、ページ上の img タグの下にある非表示タイプの input タグの名前と同じである必要があります。 
最初に画像以外の他のデータを保存してから、画像を処理します。
最初に、最後の画像の名前を受け取る文字列型変数を宣言し、次に fileDriverImage が空かどうかを確認します。空に等しくない場合。まず、イメージのサフィックス名を取得します。これは、後で渡されたイメージがイメージ タイプであるかどうかを判断するために使用されます。変更中に同じ名前の画像が表示された場合の例外を防ぐために、5 つのランダムな文字列が画像名 (fileName) の前に結合されます。次に、Bai Cun の写真へのパスが存在するかどうかを確認し、パスが存在しない場合は、プロジェクト内に対応するパスを作成します。パスは 2 つに分かれており、アップロード後、データがデータベースに保存される前に、一時的なパスが画像を保存するために使用されます。データが正常に保存された後、画像を保存するために使用される最終パス。次に、画像が保存される一時パスとデータベースに保存される画像のパスを結合します。次に、データベースに保存する結合画像のパスを、保存するテーブル オブジェクトの対応するフィールドに割り当てます。次に、先に取得したサフィックス名を判断し、すべてのサフィックス名を小文字に変換して、イメージ タイプであるかどうかを判断します。画像タイプの場合は、画像を一時パスに保存します。
string fileName = "";
//判断图片是否为空
if (fileDriverImage != null)
{
string fileExtension = System.IO.Path.GetExtension(fileDriverImage.FileName);
fileName = Common.ValidCodeUtils.GetRandomCode(5) + fileDriverImage.FileName;
//判断是否存在该路径，若不存在，创建 最终路径
if (!Directory.Exists(Server.MapPath("~/Document/BusinessManagement/Driverimg/")))
{
Directory.CreateDirectory(Server.MapPath("~/Document/BusinessManagement/Driverimg/"));
}
//临时路径
if (!Directory.Exists(Server.MapPath("~/Document/BusinessManagement/Temp/")))
{
Directory.CreateDirectory(Server.MapPath("~/Document/BusinessManagement/Temp/"));
}
//拼接保存的图片路径
string fileTempPath = Server.MapPath("/Document/BusinessManagement/Temp/") + fileDriverImage.FileName;
string fileSavePath = "/Document/BusinessManagement/Driverimg/" + fileDriverImage.FileName;
sysDriver.DriverPicture = fileSavePath;
if (fileExtension != null)
{
fileExtension = fileExtension.ToLower(); //将后缀转化为小写
//判断文件扩展名是否是指定的图片类型
if ("(.gif)|(.jpg)|(.bmp)|(.jpeg)|(.png)".Contains(fileExtension))
{
fileDriverImage.SaveAs(fileTempPath); //保存文件
}
}
}
数据库保存成功之后将图片从临时路径移动到最终路径
在数据保存成功之后，判断获取到的图片的文件是否为空，若不为空，获取图片在临时路径中的路径和在最终路径中的路径。然后使用IO中的Move将图片从临时路径移动到最终路径。
以上がレイウイテーブルに写真を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。