Explication détaillée de la façon dont jquery easyui implémente les colonnes formatées-js tutoriel-php.cn

Explication détaillée de la façon dont jquery easyui implémente les colonnes formatées

小云云

Libérer： 2017-12-31 15:38:24

original

1584 Les gens l'ont consulté

Cet article présente principalement comment implémenter des colonnes formatées dans jquery easyui. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Page du cadre principal : le contenu de l'URL cliqué dans le menu West Side sera chargé dans la zone d'interface principale.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>主界面</title>
  <p th:include="/public/util::public"/>
  <p th:include="/public/util::jquery-easyui"/>
  <script type="text/javascript" th:src="(${@configApp.getStaticWeb()})+&#39;/cms/script/main/index.js&#39;"></script>
  <script type="text/javascript" th:src="(${@configApp.getStaticWeb()})+&#39;/cms/script/site/site-index.js&#39;"></script>  
</head>
<body class="easyui-layout">
  <p data-options="region:&#39;north&#39;,title:&#39;&#39;" style="height:80px;" id="north"></p>
  <p data-options="region:&#39;west&#39;,title:&#39;系统功能区&#39;,split:true" style="width:200px;">
    <ul class="easyui-tree" id="menu"></ul>
  </p>
  <p data-options="region:&#39;center&#39;,title:&#39;主界面区&#39;" style="padding:5px;" id="center"></p>
</body>
</html>

Copier après la connexion

À ce stade, easy a été chargé sur la page principale -Les scripts UI et CSS n'ont pas besoin d'être chargés dans chaque page de zone Même s'ils sont chargés, ils seront supprimés.

J'ai initialement ajouté la fonction de formatage à la grille de données. page, mais cela n'a eu aucun effet. Il a toujours signalé que formatIvalid était introuvable.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>站点列表页面</title>
  <script type="text/javascript">
  function formatIsvalid(val,row){
    return val==&#39;1&#39;?&#39;是&#39;:&#39;否&#39;;
  }
  </script>
</head>
<body>
  <table id="site" title="站点列表" class="easyui-datagrid" th:url="@{/site/list}"
      toolbar="#siteToolbar" rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
      <tr>
        <th field="siteid" width="50">ID</th>
        <th field="sitename" width="50">名称</th>
        <th field="siteurl" width="50">网址</th>
        <th field="isvalid" width="50" formatter="formatIsvalid">是否有效</th>
        <th field="isdelete" width="50">是否可以删除</th>
        <th field="remark" width="50">备注</th>
        <th field="createtime" width="50">创建时间</th>
      </tr>
    </thead>
  </table>
  <p id="siteToolbar">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newSite()">新增</a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editSite()">编辑</a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeSite()">删除</a>
  </p>
</body>
</html>

Copier après la connexion

Solution : placez cette fonction de formatage sur la page principale et. il n'y aura pas de problème.

Recommandations associées :

Des exemples décrivent brièvement certaines utilisations de jQuery Easyui

Des exemples expliquent en détail le DataGrid d'EasyUI en ajoutant des boutons d'action pour chaque ligne de données

Explication détaillée de Datagrid dans le contrôle EasyUi

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!