Résumé de l'utilisation courante du composant de table layui
la table est l'un des composants essentiels de layui. Il est utilisé pour exécuter une série de fonctions et d'opérations de données dynamiques sur des tables, couvrant presque tous les besoins impliqués dans les activités quotidiennes. Prend en charge les en-têtes fixes, les lignes fixes, la colonne fixe gauche/colonne droite, prend en charge le glisser pour modifier la largeur des colonnes, prend en charge le tri, prend en charge les en-têtes à plusieurs niveaux, prend en charge les modèles personnalisés pour les cellules et prend en charge la surcharge des tableaux (comme la recherche et le filtrage conditionnel), etc. ), prend en charge les cases à cocher, prend en charge la pagination, prend en charge l'édition de cellules et une série de fonctions.
Un exemple est compilé ci-dessous :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>layer学习</title>
<link href="/Content/mycss.css" rel="stylesheet" />
<link href="/Content/layui/css/layui.css" rel="stylesheet" />
<script src="/Content/layui/layui.js"></script>
</head>
<body>
<!--表格-->
<div id="myTable" lay-filter="test"></div>
<!--工具栏-->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="allow">
<!-- 这里的 checked 的状态只是演示 -->
<input type="checkbox" name="{{d.Id}}" value="{{d.Id}}" title="允许" lay-filter="allowSetFilter" {{ d.IsAllow == true ? 'checked' : '' }}>
</script>
<script>
layui.use(['table','form'], function () {
var table = layui.table;
form = layui.form;
//*******************************渲染表格**********************************
table.render({
//------------------------核心参数
elem: '#myTable' //渲染的dom元素
, url: '/Home/GetUserList' //异步请求接口
, page: true //开启分页
, id: 'elementID' //容器唯一ID
, cols: [[ //列设置
{ field: 'Id', title: '编号', sort: true, fixed: 'left' }
, { field: 'Name', title: '姓名' }
, { field: 'Age', title: '年龄' }
, { field: 'Role', title: '角色' }
, { field: 'CreateTime', title: '创建时间' }
, {
title: '自定义模板', width: 200
, templet: function (d) {
return '姓名：<span style="color: #c00;">' + d.Name + '</span>'
}
}
, { field: 'IsAllow', title: '是否使用', templet: '#allow', unresize: true, align: 'center' }
, { fixed: 'right', width: 150, align: 'center', toolbar: '#barDemo' }
]]
//-----------------------------异步请求设置
, method: 'post' //异步请求方式
, headers: { hello: 'hengheng' } //在request的header中添加数据
, request: { //request设置，默认值如下
pageName: 'page',
limitName: 'limit'
}
, response: { //response设置，默认值如下
statusName: 'code'
, countName: 'count'
, dataName: 'data'
, msgName: 'msg'
}
, where: { //向后台添加的额外参数
nameParm: 'u',
roleParm: 'o'
}
//-----------------------加载的其他选项
, done: function (res, curr, count) {
//res为接口返回的数据、count为数据总长度
console.log(res);
console.log(curr);
console.log(count);
}
, text: {
none: '暂无相关数据' //默认：无数据。
}
, initSort: {
field: 'Id' //排序字段为Id
, type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
}
})
//*******************************监听表格**********************************
table.on('tool(test)', function (obj) { //test为lay-filter值
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event
var tr = obj.tr; //获得当前行 tr 的DOM对象
if (layEvent === 'edit') {
var id = data.Id;
layer.open({
type: 2
, title: '修改' //标题栏
, scrollbar: false
, area: ['400px', '300px']
, shade: 0.5
, id: 'layerId' //设定一个id，防止重复弹出
, moveType: 1 //拖拽模式，0或者1
, content: '/Home/EditUserInfo?id=' + id
});
} else if (layEvent === 'del') {
layer.confirm('真的删除吗？', function (index) {
obj.del(); //删除对应行（tr）的DOM结构
layer.close(index);
var id = data.Id; //向服务端发送删除指令
$.post("/Home/DeleteUserInfo", { "id": id }, function (result) {
if (result.IsSuccess === 1) {
layer.msg(result.Msg);
table.reload('elementID');
} else {
layer.msg(result.Msg);
table.reload('elementID');
}
})
});
}
});
//*******************************监听checkbox********************************
//监听操作----置顶
form.on('checkbox(allowSetFilter)', function (obj) {
var pre = {
"Id": this.name,
"IsAllow": obj.elem.checked
};
//alert(this.name+'----'+obj.elem.checked);
$.post('/Home/SetAllow', pre, function (result) {
if (result.IsSuccess === 1) {
layer.msg(result.msg)
} else {
layer.msg(result.msg)
}
})
});
});
</script>
</body>
</html>Pour plus de connaissances sur Layui, veuillez faire attention à la colonne Tutoriel d'utilisation de Layui.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment configurer le saut sur la page de connexion Layui
Apr 04, 2024 am 03:12 AM
Étapes de configuration du saut de la page de connexion Layui : Ajouter un code de saut : ajoutez un jugement dans l'événement de clic sur le bouton de soumission du formulaire de connexion et accédez à la page spécifiée via window.location.href après une connexion réussie. Modifiez la configuration du formulaire : ajoutez un champ de saisie masqué à l'élément de formulaire de lay-filter="login", avec le nom "redirect" et la valeur étant l'adresse de la page cible.
Comment obtenir des données de formulaire dans Layui
Apr 04, 2024 am 03:39 AM
layui fournit diverses méthodes pour obtenir des données de formulaire, notamment l'obtention directe de toutes les données de champ du formulaire, l'obtention de la valeur d'un seul élément de formulaire, l'utilisation de la méthode formAPI.getVal() pour obtenir la valeur de champ spécifiée, la sérialisation des données de formulaire et en l'utilisant comme paramètre de requête AJAX et en écoutant l'événement de soumission de formulaire, vous obtenez des données.
Comment Layui met en œuvre l'auto-adaptation
Apr 26, 2024 am 03:00 AM
Une mise en page adaptative peut être obtenue en utilisant la fonction de mise en page réactive du framework layui. Les étapes comprennent : le référencement du framework layui. Définissez un conteneur de mise en page adaptatif et définissez la classe layui-container. Utilisez des points d'arrêt réactifs (xs/sm/md/lg) pour masquer des éléments sous des points d'arrêt spécifiques. Spécifiez la largeur de l'élément à l'aide du système de grille (layui-col-). Créez un espacement via le décalage (layui-offset-). Utilisez des utilitaires réactifs (layui-invisible/show/block/inline) pour contrôler la visibilité des éléments et leur apparence.
Comment transférer des données dans Layui
Apr 26, 2024 am 03:39 AM
La méthode d'utilisation de layui pour transmettre des données est la suivante : Utilisez Ajax : créez l'objet de requête, définissez les paramètres de la requête (URL, méthode, données) et traitez la réponse. Utilisez des méthodes intégrées : simplifiez le transfert de données à l'aide de méthodes intégrées telles que $.post, $.get, $.postJSON ou $.getJSON.
Quelle est la différence entre layui et vue ?
Apr 04, 2024 am 03:54 AM
La différence entre layui et Vue se reflète principalement dans les fonctions et les préoccupations. Layui se concentre sur le développement rapide d'éléments d'interface utilisateur et fournit des composants préfabriqués pour simplifier la construction de pages ; Vue est un framework full-stack qui se concentre sur la liaison de données, le développement de composants et la gestion d'état, et est plus adapté à la création d'applications complexes. Layui est facile à apprendre et convient pour créer rapidement des pages ; Vue a une courbe d'apprentissage abrupte mais permet de créer des applications évolutives et faciles à entretenir. En fonction des besoins du projet et du niveau de compétence du développeur, le cadre approprié peut être sélectionné.
Comment exécuter Layui
Apr 04, 2024 am 03:42 AM
Pour exécuter layui, effectuez les étapes suivantes : 1. Importez le script layui ; 2. Initialisez layui ; 3. Utilisez les composants layui ; 4. Importez les styles layui (facultatif) ; Avec ces étapes, vous pouvez créer des applications Web en utilisant la puissance de layui.
Que veut dire Layui ?
Apr 04, 2024 am 04:33 AM
layui est un framework d'interface utilisateur frontal qui fournit une multitude de composants, d'outils et de fonctions d'interface utilisateur pour aider les développeurs à créer rapidement des applications Web modernes, réactives et interactives. Ses fonctionnalités incluent : une conception modulaire flexible et légère, des composants riches, des outils puissants et simples. personnalisation. Il est largement utilisé dans le développement de diverses applications Web, notamment des systèmes de gestion, des plateformes de commerce électronique, des systèmes de gestion de contenu, des réseaux sociaux et des applications mobiles.
La différence entre le framework layui et le framework vue
Apr 26, 2024 am 01:27 AM
layui et vue sont des frameworks frontaux. layui est une bibliothèque légère qui fournit des composants et des outils d'interface utilisateur ; vue est un framework complet qui fournit des composants d'interface utilisateur, la gestion de l'état, la liaison de données, le routage et d'autres fonctions. Layui est basé sur une architecture modulaire et Vue est basée sur une architecture à composants. layui a un écosystème plus petit, vue a un écosystème vaste et actif. La courbe d'apprentissage de layui est faible et la courbe d'apprentissage de vue est raide. layui convient aux petits projets et au développement rapide de composants d'interface utilisateur, tandis que vue convient aux grands projets et scénarios nécessitant des fonctions riches.
