AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

68jqGrid - 自定义层级图标

2023-10-25 34
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 68jqGrid - 自定义层级图标

我们可以改变多级表格的图标。我们需要改变多级表格的一个选项，他指向这个主题的图标。

HTML代码举例

<html>
  <head>
    <title>jqGrid 实例</title>
  </head>
  <body>
    ···代码省略···
    <table id="sg1"></table>
    <div id="psg1"></div>
    ···代码省略···
  </body>
</html

javascript代码举例

$(function(){
  pageInit();
});
function pageInit(){
  jQuery("#sg1").jqGrid({
       url:ctx+'/JSONData',
    datatype: "JSON",
    height: 190,
       colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
       colModel:[
         {name:'id',index:'id', width:55},
         {name:'invdate',index:'invdate', width:90},
         {name:'name',index:'name', width:100},
         {name:'amount',index:'amount', width:80, align:"right"},
         {name:'tax',index:'tax', width:80, align:"right"},
         {name:'total',index:'total', width:80,align:"right"},
         {name:'note',index:'note', width:150, sortable:false}
       ],
       rowNum:8,
       rowList:[8,10,20,30],
       pager: '#psg1',
       sortname: 'id',
      viewrecords: true,
      sortorder: "desc",
    multiselect: false,
    subGrid: true,
    caption: "Custom Icons in Subgrid",
    // define the icons in subgrid
    subGridOptions: {
      "plusicon"  : "ui-icon-triangle-1-e",
      "minusicon" : "ui-icon-triangle-1-s",
      "openicon"  : "ui-icon-arrowreturn-1-e"
    },
    subGridRowExpanded: function(subgrid_id, row_id) {
      var subgrid_table_id, pager_id;
      subgrid_table_id = subgrid_id+"_t";
      pager_id = "p_"+subgrid_table_id;
      $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
      jQuery("#"+subgrid_table_id).jqGrid({
        url:ctx+"/SubGrid?q=2&id="+row_id,
        datatype: "json",
        colNames: ['No','Item','Qty','Unit','Line Total'],
        colModel: [
          {name:"num",index:"num",width:80,key:true},
          {name:"item",index:"item",width:130},
          {name:"qty",index:"qty",width:70,align:"right"},
          {name:"unit",index:"unit",width:70,align:"right"},
          {name:"total",index:"total",width:70,align:"right",sortable:false}
        ],
           rowNum:20,
           pager: pager_id,
           sortname: 'num',
          sortorder: "asc",
          height: '100%'
      });
      jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false})
    }
  });
  jQuery("#sg1").jqGrid('navGrid','#psg1',{add:false,edit:false,del:false});
}

Master java servlet代码举例

package net.mn886.blog.jqgrid.loadding_data;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * Servlet implementation class JSONData
 */
public class JSONData extends HttpServlet {
  private static final long serialVersionUID = 1L;
    /**
     * @see HttpServlet#HttpServlet()
     */
    public JSONData() {
        super();
        // TODO Auto-generated constructor stub
    }
  @Override
  protected void doGet(HttpServletRequest req, HttpServletResponse resp)
      throws ServletException, IOException {
    // TODO Auto-generated method stub
    doPost(req,resp);
  }
  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    String jsondata = "{\"page\":\"1\"," +
        "      \"total\":2," +
        "      \"records\":\"13\"," +
        "      \"rows\":" +
        "          [" +
        "            {" +
        "              \"id\":\"13\"," +
        "              \"cell\":" +
        "                  [\"13\",\"2007-10-06\",\"Client 3\",\"1000.00\",\"0.00\",\"1000.00\",null]" +
        "            }," +
        "            {" +
        "              \"id\":\"12\"," +
        "              \"cell\":" +
        "                  [\"12\",\"2007-10-06\",\"Client 2\",\"700.00\",\"140.00\",\"840.00\",null]" +
        "            }," +
        "            {" +
        "              \"id\":\"11\"," +
        "              \"cell\":" +
        "                  [\"11\",\"2007-10-06\",\"Client 1\",\"600.00\",\"120.00\",\"720.00\",null]" +
        "            }," +
        "            {" +
        "              \"id\":\"10\"," +
        "              \"cell\":" +
        "                  [\"10\",\"2007-10-06\",\"Client 2\",\"100.00\",\"20.00\",\"120.00\",null]" +
        "            }," +
        "            {" +
        "              \"id\":\"9\"," +
        "              \"cell\":" +
        "                  [\"9\",\"2007-10-06\",\"Client 1\",\"200.00\",\"40.00\",\"240.00\",null]" +
        "            }," +
        "            {" +
        "              \"id\":\"8\"," +
        "              \"cell\":" +
        "                  [\"8\",\"2007-10-06\",\"Client 3\",\"200.00\",\"0.00\",\"200.00\",null]" +
        "            }," +
        "            {" +
        "              \"id\":\"7\"," +
        "              \"cell\":" +
        "                  [\"7\",\"2007-10-05\",\"Client 2\",\"120.00\",\"12.00\",\"134.00\",null]" +
        "            }," +
        "            {" +
        "              \"id\":\"6\"," +
        "              \"cell\":" +
        "                  [\"6\",\"2007-10-05\",\"Client 1\",\"50.00\",\"10.00\",\"60.00\",\"\"]" +
        "            }," +
        "            {" +
        "              \"id\":\"5\"," +
        "              \"cell\":" +
        "                  [\"5\",\"2007-10-05\",\"Client 3\",\"100.00\",\"0.00\",\"100.00\",\"no tax at all\"]" +
        "            }," +
        "            {" +
        "              \"id\":\"4\"," +
        "              \"cell\":" +
        "                  [\"4\",\"2007-10-04\",\"Client 3\",\"150.00\",\"0.00\",\"150.00\",\"no tax\"]" +
        "            }" +
        "          ]," +
        "      \"userdata\":{\"amount\":3220,\"tax\":342,\"total\":3564,\"name\":\"Totals:\"}" +
        "    }";
    response.getWriter().write(jsondata);
  }

Subgrid java servlet代码举例

package net.mn886.blog.jqgrid.advanced;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * Servlet implementation class SubGrid
 */
public class SubGrid extends HttpServlet {
  private static final long serialVersionUID = 1L;
    /**
     * @see HttpServlet#HttpServlet()
     */
    public SubGrid() {
        super();
        // TODO Auto-generated constructor stub
    }
  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    doPost(request,response);
  }
  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    String id = request.getParameter("id");
    int iId = Integer.parseInt(id);
    String jsondata = "{}";
    switch (iId) {
    case 13:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"1\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 13\",\"1.00\",\"1000.00\",\"1 000.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 12:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"2\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 2\",\"1.00\",\"400.00\",\"400.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 4\",\"1.00\",\"300.00\",\"300.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 11:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"4\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 1\",\"2.00\",\"100.00\",\"200.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 2\",\"3.00\",\"50.00\",\"150.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"3\"," +
          "        \"cell\":[\"3\",\"item 3\",\"1.00\",\"50.00\",\"50.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"4\"," +
          "        \"cell\":[\"4\",\"item 4\",\"1.00\",\"200.00\",\"200.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 10:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"2\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 4\",\"1.00\",\"70.00\",\"70.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 5\",\"3.00\",\"10.00\",\"30.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 9:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"2\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 3\",\"1.00\",\"60.00\",\"60.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 6\",\"1.00\",\"140.00\",\"140.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 8:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"3\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 2\",\"1.00\",\"120.00\",\"120.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 3\",\"1.00\",\"50.00\",\"50.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"3\"," +
          "        \"cell\":[\"3\",\"item 3\",\"1.00\",\"30.00\",\"30.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 7:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"2\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 1\",\"1.00\",\"100.00\",\"100.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 5\",\"2.00\",\"10.00\",\"20.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 6:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"1\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 4\",\"1.00\",\"50.00\",\"50.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 5:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"1\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 3\",\"1.00\",\"100.00\",\"100.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 4:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"2\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 1\",\"1.00\",\"100.00\",\"100.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 2\",\"1.00\",\"50.00\",\"50.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 3:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"2\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 3\",\"1.00\",\"100.00\",\"100.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 4\",\"1.00\",\"200.00\",\"200.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 2:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"2\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 1\",\"2.00\",\"20.00\",\"40.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 2\",\"4.00\",\"40.00\",\"160.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 1:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"2\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 1\",\"1.00\",\"20.00\",\"20.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 2\",\"2.00\",\"40.00\",\"80.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    default:
      break;
    }
    response.getWriter().write(jsondata);
  }
}
文章标签：
Java
JavaScript
前端开发
阿甘兄
目录
相关文章
六卿
|
2月前
|
前端开发
element菜单组件样式修改NavMenu导航菜单
本文介绍了如何修改Element UI的NavMenu导航菜单组件的样式，包括激活菜单项的颜色、菜单项hover颜色、父级菜单hover颜色以及菜单行高。提供了相应的CSS代码示例，并展示了如何将这些样式应用到实际的NavMenu组件中。
六卿
144 3
element菜单组件样式修改NavMenu导航菜单
fruge365
|
4月前
|
JavaScript
【UI】 elementUI的select-tree组合下拉框，选择后下拉框不收起
【UI】 elementUI的select-tree组合下拉框，选择后下拉框不收起
fruge365
256 1
朝阳39
|
4月前
|
JavaScript
vue 指定区域可拖拽的限定拖拽区域的div（如仅弹窗标题可拖拽的弹窗）
vue 指定区域可拖拽的限定拖拽区域的div（如仅弹窗标题可拖拽的弹窗）
朝阳39
205 0
朝阳39
|
4月前
Element UI 自定义/修改下拉弹窗的样式（如级联选择器的下拉弹窗样式）
Element UI 自定义/修改下拉弹窗的样式（如级联选择器的下拉弹窗样式）
朝阳39
464 0
爱你三千遍斯塔克
|
5月前
|
开发工具 git
大事件项目12--侧边栏导航的组件标签准备
大事件项目12--侧边栏导航的组件标签准备
爱你三千遍斯塔克
33 0
技术君
|
6月前
|
JavaScript 前端开发 API
【每周一个小技巧】如何自定义客服、生活号组件的样式
【每周一个小技巧】如何自定义客服、生活号组件的样式
技术君
68 8
你挚爱的强哥
|
6月前
【sgDragSize】自定义组件：自定义拖拽修改DIV尺寸组件，适用于窗体大小调整
【sgDragSize】自定义组件：自定义拖拽修改DIV尺寸组件，适用于窗体大小调整
你挚爱的强哥
107 0
阿甘兄
06zTree - 自定义图标（iconSkin 属性）
06zTree - 自定义图标（iconSkin 属性）
阿甘兄
100 0
阿甘兄
|
JavaScript 前端开发 Java
69jqGrid -层级加载时展开所有行
69jqGrid -层级加载时展开所有行
阿甘兄
36 0
阿甘兄
|
JavaScript 前端开发
24EasyUI 数据网格- 创建复杂工具栏
24EasyUI 数据网格- 创建复杂工具栏
阿甘兄
47 0

热门文章

最新文章

  • 1
    SpringBoot开发案例之整合Dubbo提供者(一)
  • 2
    阿里AI上岗双11服装车间，能识别头发丝直径十分之一的瑕疵
  • 3
    Webpack构建library时的踩坑经历
  • 4
    安装nginx：src/os/unix/ngx_user.c:26:7: error: ‘struct crypt_data’ has no member named ‘curren
  • 5
    字节流套接口的读写
  • 6
    【转】类别catagory的用法
  • 7
    lsof 命令
  • 8
    TeamCity : 自动触发 Build
  • 9
    建站篇-用户认证系统-管理员登陆后台
  • 10
    asp.net学习之ado.net(无连接模式中的DataAdapter)
  • 1
    VideoChat：高效学习新神器！一键解读音视频内容，结合 AI 生成总结内容、思维导图和智能问答
    32
  • 2
    《C++巧筑智能框架根基：开启 AI 开发新航道》
    27
  • 3
    《跨越语言壁垒：Python 人工智能原型到 C++可执行程序的转型之路》
    22
  • 4
    Go语言中json序列化的一个小坑，建议多留意一下
    24
  • 5
    JVM常见面试题（四）：垃圾回收
    24
  • 6
    C语言物联网开发之设备安全与代码可靠性隐患
    21
  • 7
    C语言物联网开发之设备安全与代码可靠性隐患
    19
  • 8
    C 语言物联网开发之网络通信与数据传输难题
    18
  • 9
    Linux服务器安全
    15
  • 10
    Web应用防火墙（WAF）与数据库应用防火墙有什么区别？
    15

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 图表样式智能美化工具
  • 前端开发基础3：CSS3常见显示属性
  • ROS模板参数动态展示
    • 下一篇
    无影云桌面