So zeigen Sie Bilder in der Laui-Tabelle an

So zeigen Sie Bilder in Laui-Tabellen an: Platzieren Sie zunächst ein Tabellen-Tag, eine ID und einen Lay-Filter im HTML-Code. Verwenden Sie dann die benutzerdefinierte Vorlagenfunktion im JS-Code, um schließlich eine Variable vom Typ String zu implementieren um den Namen des Bildes zu erhalten.

Die Betriebsumgebung dieses Tutorials: Windows10-System, Laui2.5.6. Dieser Artikel gilt für alle Computermarken.

Empfohlen: „layUI-Tutorial“

1. Der erzielte Effekt

2. Code
HTML-Code
HTML-Code ähnelt immer noch anderen Tabellen, er muss nur vorhanden sein An der richtigen Stelle Platzieren Sie eine Tabellenbeschriftung und schreiben Sie sowohl die ID als auch den Lay-Filter.

JS-Code
Abgesehen davon, dass sich die Bildspalte von anderen Spalten unterscheidet, sind die anderen Spalten im Grunde ähnlich. Wenn Sie einige feste Spalten schreiben, werden Sie natürlich feststellen, dass die festen Spalten, die Sie schreiben, auch erforderlich sind sich von anderen Spalten unterscheiden. Lassen Sie uns zunächst über die Spalte mit den Fahrerbildern sprechen. In dieser Spalte wird die Funktion einer benutzerdefinierten Vorlage (Templet) verwendet. Mit dieser Funktion können Sie eine logische Verarbeitung durchführen und Rohdaten in andere Formate konvertieren. Natürlich habe ich hier keine Datenkonvertierung verwendet. Hier verwende ich diese Funktion nur, um einige Stile hinzuzufügen.

    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();
                });
            });

Benutzerdefinierte Vorlage (Templet)
Hier ist die Möglichkeit, eine benutzerdefinierte Vorlage zu schreiben, sehr einfach. Die äußerste Ebene ist mit einem Skript-Tag umschlossen. Der Typ des Skript-Tags ist „imgtep“ (Die ID muss hier mit der ID im Template in der Spalte des Fahrerfotos in der Laui-Tabelle übereinstimmen ). Verwenden Sie im Skript-Tag ein img-Tag, um das Foto des Fahrers anzuzeigen, und geben Sie dem img-Tag eine feste Breite und Höhe. Darunter stellt {{d.DriverPicture}} in src den Pfad des entsprechenden Bildes dar, das aus der Datenbank abgefragt wird. (Meine Datenbank speichert hier den Pfad des entsprechenden Bildes und das entsprechende Bild wird in einem speziellen Ordner im Projekt gespeichert. Anstatt binär gespeicherte Bilder zu verwenden. Wenn Sie binär zum Speichern von Bildern verwenden, müssen die Daten nach der Abfrage verarbeitet werden. Konvertierung . )

Wenn in der Laui-Datentabelle feste Spalten festgelegt sind
Fügen Sie den entsprechenden festen Spalten einen Stil hinzu und legen Sie dann die Höhe dieser festen Spalten fest.

Controller-Code – Bild speichern
Ich bin zu faul, einige Abfragen auf der Controller-Seite zu schreiben. Verwenden Sie zunächst den von HttpPostedFileBase in der Controller-Methode empfangenen Namen. . Hinweis: Der empfangene Name muss mit dem Namen des versteckten Typ-Eingabe-Tags unter dem img-Tag auf der Seite identisch sein.

Speichern Sie zuerst die anderen Daten außer dem Bild und verarbeiten Sie dann das Bild.
Deklarieren Sie zunächst eine Variable vom Typ String, um den Namen des letzten Bilds zu erhalten, und prüfen Sie dann, ob fileDriverImage leer ist, wenn nicht gleich leer. Rufen Sie zunächst den Suffixnamen des Bildes ab, der später verwendet wird, um festzustellen, ob das übergebene Bild dem Bildtyp entspricht. Fünf zufällige Zeichenfolgen werden vor den Bildnamen (fileName) gespleißt, um Ausnahmen zu verhindern, wenn während der Änderung Bilder mit demselben Namen erscheinen. Stellen Sie dann fest, ob der Pfad zu Bai Cuns Bild vorhanden ist. Wenn der Pfad nicht vorhanden ist, erstellen Sie den entsprechenden Pfad im Projekt. Der Pfad ist zweigeteilt, ein temporärer Pfad dient zum Speichern der Bilder nach dem Hochladen, aber bevor die Daten in der Datenbank gespeichert werden. Ein endgültiger Pfad, der zum Speichern des Bildes verwendet wird, nachdem die Daten erfolgreich gespeichert wurden. Verbinden Sie dann den temporären Pfad, in dem das Bild gespeichert wird, mit dem Pfad des Bildes, das in der Datenbank gespeichert werden soll. Weisen Sie dann den Pfad des zusammengefügten Bildes, das in der Datenbank gespeichert werden soll, dem entsprechenden Feld im zu speichernden Tabellenobjekt zu. Beurteilen Sie dann den zuvor erhaltenen Suffixnamen, wandeln Sie alle Suffixnamen in Kleinbuchstaben um und bestimmen Sie dann, ob es sich um einen Bildtyp handelt. Wenn es sich um einen Bildtyp handelt, speichern Sie das Bild in einem temporären Pfad.

                        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将图片从临时路径移动到最终路径。

Das obige ist der detaillierte Inhalt vonSo zeigen Sie Bilder in der Laui-Tabelle an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!