suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erklärung, wie jquery easyui formatierte Spalten implementiert

Detaillierte Erklärung, wie jquery easyui formatierte Spalten implementiert

小云云
小云云Original
2017-12-31 15:38:241581Durchsuche

In diesem Artikel wird hauptsächlich die Implementierung formatierter Spalten in jquery easyui vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Hauptrahmenseite: Der im West Side-Menü angeklickte URL-Inhalt wird in den Hauptschnittstellenbereich geladen.


<!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>

Zu diesem Zeitpunkt easy wurde auf der Hauptseite geladen – UI-Skripte und CSS müssen nicht auf jeder Bereichsseite geladen werden. Auch wenn sie geladen werden, werden sie entfernt.

Ich habe zunächst die Formatierungsfunktion zum Datagrid hinzugefügt Seite, aber es wurde immer gemeldet, dass formatIsvalid nicht gefunden werden konnte.


<!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>

Lösung: Fügen Sie diese Formatierungsfunktion auf die Hauptseite ein es wird kein Problem geben.

Verwandte Empfehlungen:

Beispiele beschreiben kurz einige Verwendungen von jQuery Easyui

Beispiele erläutern ausführlich das DataGrid von EasyUI, das Aktionsschaltflächen für jede Zeile hinzufügt von Daten

Detaillierte Erklärung von Datagrid in der EasyUi-Steuerung

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, wie jquery easyui formatierte Spalten implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So laden Sie einen Avatar im WeChat-Applet hochNächster Artikel：So laden Sie einen Avatar im WeChat-Applet hoch

In Verbindung stehende Artikel

Mehr sehen