当前位置:编程学习 > C#/ASP.NET >>

jquery datagrid 动态添加 columns

function addDataGridCols() {

    var returnCol = "";
    var idsTitle = []; //得到所有选择项

    contrlTitleName = "";

    var selected = $("#NormsManageTab").datagrid("getSelections");

    for (var i = 0; i < selected.length; i++) {

        returnCol += "{";
        returnCol += "field:" +" 'NTitle"+i+"'"+",";
        returnCol += "title:'" + selected[i].Title+"',";
        returnCol += 'rowspan: 2, width: 110,editor: "text"';
        returnCol +="}"
    }
    alert(returnCol);
    return returnCol;

}
function ColumsList() {
    //生成列表项
    $('#normsDetailsList').datagrid({

    columns: [[
                 { field: 'PCode', title: '货号', rowspan: 2, height:50, width: 110, editor: 'text' },
                 { field: 'WareNumber', title: '库存量', rowspan: 2, width: 75, editor:{type:'numberbox'}  },
                 { field: 'SPrice', title: '销售价格', rowspan: 2, width: 70, editor: {type:'numberbox',options:{precision:1}} },
                 { field: 'BPrice', title: '易做图格', rowspan: 2, width: 70, editor: { type: 'numberbox', options: { precision: 1}} },
                 { field: 'MPrice', title: '市场价格', rowspan: 2, width: 70, editor: { type: 'numberbox', options: { precision: 1}} },
                 { field: 'SWeight', title: '重量', rowspan: 2, width: 70, editor: { type: 'numberbox'} },
                 { field: 'StockPosition', title: '货位', rowspan: 2, width: 100, editor: 'text' },
                 { field: 'IsSale', title: '上架销售', rowspan: 2, width: 70, editor: { type: 'checkbox', options: { on: '是', off: '否'}} },
                    addDataGridCols()
                 ]]
)}; --------------------编程问答--------------------

jquery datagrid动态加载数据 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="<%=basePath %>admin/js/easyui.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath %>admin/test/css/icon.css">
    <script type="text/javascript" src="<%=basePath %>admin/test/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="<%=basePath %>admin/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="<%=basePath %>admin/js/easyui-lang-zh_CN.js"></script>
    
        

<!-- 时间js -->
        <link rel="stylesheet" type="text/css" href="<%=basePath%>admin/Zhuanjia/calendar/GooCalendar.css"/>
<script  type="text/javascript" src="<%=basePath%>admin/Zhuanjia/calendar/GooFunc.js"></script>
<script  type="text/javascript" src="<%=basePath%>admin/Zhuanjia/calendar/GooCalendar.js"></script>
        <!-- jquery 特效 -->
<link rel="stylesheet" type="text/css" href="<%=basePath %>admin/test/css/easyui.css"/>
    
    
    <!-- 日历 -->
    <script type="text/javascript">
var property2={
    divId:"demo2",//日历控件最外层DIV的ID
    needTime:true,//是否需要显示精确到秒的时间选择器,即输出时间中是否需要精确到小时:分:秒 默认为FALSE可不填
    yearRange:[1970,2030],//可选年份的范围,数组第一个为开始年份,第二个为结束年份,如[1970,2030],可不填
    week:['Su','Mo','Tu','We','Th','Fr','Sa'],//数组,设定了周日至周六的显示格式,可不填
    month:['January','February','March','April','May','June','July','August','September','October','November','December'],//数组,设定了12个月份的显示格式,可不填
    format:"yyyy-MM-dd hh:mm:ss"
};

$(document).ready(function(){
    canva1=$.createGooCalendar("start",property2);
    canva2=$.createGooCalendar("end",property2);
    
});
 /*查询*/
     function query()
     {
  
        var start = $('#start').val();
       var end=$('#end').val();
            $('#test').datagrid(
            {
                url:'<%=basePath%>flextj07diaochaAction?start='+start+'&end='+end
            });
    }
    
</script>  

    <script>
        $(function(){
            $('#test').datagrid({
                title:'各医院预约订单数量统计报表',
                 iconCls:'icon-ok',
                width:1000,
                height:650,
                pageNumber:1,
                pageSize:15,
                 pageList:[5,10,15,20,25,30,35,50,80,100],
                collapsible:true,
                nowrap: false,
                striped: true,
                url:'<%=basePath%>flextj08hospitalAction',
                sortName: 'id',
                sortOrder:'desc',
                rownumbers:true,
                idField:'id',
                queryParam:{},
                singleSelect:false,
                frozenColumns:[[
                 {field:'ck',checkbox:false}
              ]],
            columns:[[软件开发
          {field:'syscode',title:'区域',width:100,sortable:true,editor:'text'},
          {field:'id',title:'序号',width:80,sortable:true,editor:'text'},
          {field:'hospital',title:'医院名称',width:100,sortable:true,editor:'text'},
          {field:'fhcount',title:'放号总量',width:100,sortable:true,editor:'text'},
          {field:'yycount',title:'预约总量',width:100,sortable:true,editor:'text'},
          {field:'kscount',title:'科室总数',width:100,sortable:true,editor:'text'},
          {field:'yyks',title:'预约科室',width:100,sortable:true,editor:'text'},
         {field:'zjcount',title:'专家总数',width:100,sortable:true,editor:'text'},
         {field:'yyzj',title:'预约专家',width:100,sortable:true,editor:'text'},
         {field:'wycount',title:'违约订单(人次)',width:100,sortable:true,editor:'text'}
                ]],
                pagination:true,//分页时需要设置,下方显示分页插件
                rownumbers:true
            });
        });
        
    </script>
</head>
<body>
<div style="padding-bottom: 10px;">
     开始时间:
<input type="text" value="" id="start" name="start"/>
    结束时间 :
<input type="text" value="" id="end" name="end"/>
    <a href="javascript:query();" class="l-btn l-btn-plain" icon="icon-search" style="width: 100px;">查询</a>
   </div>
   <div>
    <table id="test"></table>
    </div>
</body>
</html>

/**
 * 各医院预约订单数量统计报表
 * 作者:郑云飞
 */
    public String flextj08()
    {
        try {
            HttpServletRequest request = (HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);
            String page=request.getParameter("page");/*当前页*/
            String rows=request.getParameter("rows");/*每页显示的条数*/
            System.out.println("page===="+page+"\tpageSize"+rows);
              String start=request.getParameter("start");
                String end=request.getParameter("end");
                List<Hospital> zzs=new ArrayList<Hospital>();
                List<Hospital> zjs=hospitalService.findByHql("from Hospital");
                if(start==null||end==null)
                {
                    zzs=hospitalService.findByHql("from Hospital c  order by c.id", Integer.parseInt(page), Integer.parseInt(rows));
                }
                else
                {
                    zzs=hospitalService.findByHql("from Hospital c where c.regtime>='"+start+"' and c.regtime<='"+end+"' order by c.id", Integer.parseInt(page), Integer.parseInt(rows));
                }
            StringBuffer json = flexjson08(zzs,zjs.size());/*构造json数据格式*/
            MyPrint.responseWrite(json + "");/*输出到web前端*/
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

/**
     * 拼接json数据格式
     * 作者:郑云飞
     */
private StringBuffer flexjson08(List<Hospital> yys,int total) {
        
        StringBuffer json = new StringBuffer();发型123

        json.append("{total:").append(total).append(",rows:[");
        for (int i = 0; i < yys.size(); i++) {
            /*通过医院的名字查询改医院下的所有科室总数以及所有预约科室总数*/
            List<Keshi> ka=keshiService.findByHql("from Keshi k where k.hospital.name='"+yys.get(i).getName()+"' and k.yyzjnum>0");
            System.out.println("ka=========="+ka.size());
            /*通过科室的名字查询给科室下的所有专家总数和预约专家总数*/
            /*专家总数*/
            List<Zhuanjia> zj=zhuanjiaService.findByHql("from Zhuanjia z where z.keshi.hospital.name='"+yys.get(i).getName()+"'");
            /*预约专家总数*/
            List<Zhuanjia> yyzj=zhuanjiaService.findByHql("from Zhuanjia z where z.keshi.hospital.name='"+yys.get(i).getName()+"' and z.keshi.yyzjnum>0");
            json.append("{syscode:'").append(yys.get(i).getSyscode().getName()).append("" +
                    "',id:'").append(yys.get(i).getId()).append("" +
                            "',hospital:'").append(yys.get(i).getName()).append(
                            "',fhcount:'").append(yys.get(i).getFhcount()+"" +
                            "',yycount:'").append(yys.get(i).getYuyue()+"" +
                            "',kscount:'").append(yys.get(i).getKeshis().size()+"" +
                            "',yyks:'").append(ka.size() +
                            "',zjcount:'").append(zj.size() +
                            "',yyzj:'").append(yyzj.size()+"" +
                            "',wycount:'").append(yys.get(i).getWycount()+"" +
                                    "").append("'}");
            if (i < yys.size() - 1) {
                json.append(",");
            }
        }
        json.append("]}");
        return json;
    }

--------------------编程问答-------------------- 给columns 多加个对象就行了。
补充:.NET技术 ,  ASP.NET
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,