Easyui utilise la disposition des boutons en ligne de Dialog

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>

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'); //固定所有高度，避免行号和行数据错位 
  } 
 });

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!