Maison > interface Web > js tutoriel > le corps du texte

Easyui utilise la disposition des boutons en ligne de Dialog

小云云
Libérer: 2017-12-31 15:58:46
original
1726 Les gens l'ont consulté

Cet article vous présente principalement un exemple d'Easyui utilisant la disposition des boutons en ligne de Dialog. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Page JSP

<p class="easyui-layout" data-options="fit:true"> 
  <p data-options="region:&#39;north&#39;,split:false" 
   > 
   <p title="角色分配" >    
    <table cellpadding="12" cellspacing="0" > 
      <tr> 
       <td >角色名称:</td> 
       <td><input id="roleName" class="easyui-textbox" 
        ></td> 
       <td >角色功能:</td> 
       <td> 
        <select id="roleFun" class="easyui-combobox" data-options="editable:false,multiple:true,panelHeight:&#39;400px&#39;" ></select> 
        <p id="roleFunPanel"> 
         <ul id="roleFunTree" class="easyui-tree" data-options="animate: true,checkbox:true"> 
          <li>线路列表1</li> 
          <li>线路列表2</li> 
          <li>线路列表3</li> 
         </ul>        
        </p>        
       </td> 
       <td > 
        <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:&#39;icon-add&#39;,plain:true" onclick="newAppendRole()">添加</a> 
       </td>   
      </tr>   
    </table> 
    <table id="tblRoleDetail" ></table> 
   </p> 
  </p> 
 </p> 
  <p id="editRoleDialogFrame"></p>
Copier après la connexion

Code pièce JS

var grid = $("#tblRoleDetail").datagrid({ 
 border : false, 
 striped : true, 
 rownumbers : true, 
  fitColumns : true, 
  singleSelect : true, 
  height: '90%', 
  width: '100%', 
  idField :'roleName', 
  plain : true, 
  fit : false, <span > </span> 
  selectOnCheck:false, 
  nowrap: true, 
  onClickRow : tblRoleDetailOnClickRow , 
  columns:[[ 
   {field:'roleName',title:'角色名',width: '19%',align:'center'}, 
   {field:'funId',title:'权限名称',width: '70%',align:'left', 
   formatter: function(value,row,index){ 
    return '<span title=&#39;+value+&#39;>'+value+'</span>' 
   } 
   }, 
   {field:'opt',title:'操作',width:'10%',align:'center', 
    formatter:function(value,rec) 
    { 
     var btn1 = '<a class="editcls" onclick="newRoleEdit(\&#39;&#39;+rec.roleName+&#39;\&#39;)" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >编辑</a>'; 
     var btn2 = '<a class="delecls" onclick="removeRole(\&#39;&#39;+rec.roleName+&#39;\&#39;)" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a>'; 
     return btn1+btn2;  
    } 
   } 
  ]], 
  onLoadSuccess:function(data){ 
   $('.editcls').linkbutton({text:'编辑',plain:true,iconCls:'icon-edit'}); 
   $('.delecls').linkbutton({text:'删除',plain:true,iconCls:'icon-remove'}); 
   $('#tblRoleDetail').datagrid('fixRowHeight'); //固定所有高度,避免行号和行数据错位 
  } 
 });
Copier après la connexion

Rendu

Recommandations associées :

Explication détaillée de l'utilisation et de la fermeture du plug-in jQuery artDialog.js

Explication détaillée de l'utilisation de la boîte modale bootstrap3-dialog-master

Utilisation et définition de la balise html

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!