二 TreeGrid的绑定

最新推荐文章于 2023-03-10 21:33:50 发布

原创最新推荐文章于 2023-03-10 21:33:50 发布 · 785 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#treeGrid

技术解析专栏收录该内容

5 篇文章

订阅专栏

本文展示了如何实现树形网格的绑定及界面展示，包括数据获取、数据绑定、展开与合拢操作，适用于前端开发人员的学习与参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TreeGrid的绑定

(1)看一下效果截图：

（图 1）

实现界面的代码：

<table id="w清单明细" title="清单明细"class="easyui-treegrid" style="width:1300px;height:200px" data-options="	iconCls: 'icon-ok',
				rownumbers: true,//显示行数
				animate: true,
				collapsible: true,
                 fitColumns:true,//自动设置宽度
                 lines:true, 
				idField: 'id', //节点id
				treeField: 'text',//节点文本
                onClickRow:XuanZhong,//单击事件
              

               ">
        <thead>
         <tr>
          <th data-options="field:'InventoryDetailID' ,width:60,hidden:true" >清单明细ID</th>
          // field:'InventoryDetailID，要和控制器传来的值对应
          //清单明细ID:写给人们看的
          <th data-options="field:'ProjectOrderID' ,width:60,hidden:true" >工程量订单ID</th>
          <th data-options="field:'text' ,width:100" >编号</th>
          <th data-options="field:'Name' ,width:100" > 名称</th>
          <th data-options="field:'Unit' ,width:80" >单位</th>
          <th data-options="field:'Price' ,width:80" > 单价</th>
          <th data-options="field:'Amount' ,width:60" >数量</th>
          <th data-options="field:'AllPrice' ,width:60" >合价</th>          
          <th data-options="field:'Remark' ,width:80" >备注</th>
          <th data-options="field:'Classification' ,width:120" > 类别</th>
          <th data-options="field:'InventoryDetailFur_id' ,width:60,hidden:true" >工程量订单ID</th>
          <th data-options="field:'PriceNumber' ,width:80" >单价编号</th>
 
          </tr>
        </thead>
       </table>

把从控制器传来的额数据绑定到treegrid中：

 function onClickTree(){
           var BindingQuota = $('#Project').combobox('getValue');
         
          $.getJSON("/GongChengLiangQingDan/SelectedInventoryDetail?ProjectOrderID="+BindingQuota,
          function(data){
                //把从控制器查出的数据绑定到w清单明细'中
             $('#w清单明细').treegrid('loadData',data);
            
         
        
          });

控制器所涉及的方法：

 #region 查询清单明细
        public ActionResult SelectedInventoryDetail(string ProjectOrderID)
        {
            DataTable dt = myInventoryDetail.SelectedInventoryDetail(Convert.ToInt32(ProjectOrderID));
            //调用逻辑层的方法
            StringBuilder stringbuilder = new StringBuilder();
            //实例化stringbuilder
            stringbuilder.Append(GetDataString(dt, "0"));
            //调用GetDataString方法（dt, "0"是两个参数）
            if (stringbuilder.Length > 0)
            {
                //如果最后所传来的数剧>0,则就移除最后两个长度
                stringbuilder = stringbuilder.Remove(stringbuilder.Length - 2, 2);

                return Content(stringbuilder.ToString());
                //然后再返回给界面层
            }
            else
            {
                //return Content("no:no");
                string strin = "{}";
                //声明{}
                return Content(strin.ToString());
                //把转化的字符串用{}括起来，返回给界面层
            }
        }

        public string GetDataString(DataTable dt, string id)
        {
            StringBuilder stringbuilder = new StringBuilder();
            //实例化stringbuilder
            DataView dv = new DataView(dt);
            //把dt的数据赋值给dv
            dv.RowFilter = "InventoryDetailFur_id=" + id;
            DataTable dtChild = dv.ToTable();
            if (dtChild.Rows.Count > 0)
            {
                stringbuilder.Append("[");
                for (int i = 0; i < dtChild.Rows.Count; i++)
                {
                    string leiid = dtChild.Rows[i]["InventoryDetailID"].ToString();
                    string chidstring = GetDataString(dt, dtChild.Rows[i]["InventoryDetailID"].ToString());
                    if (!string.IsNullOrEmpty(chidstring))
                    {   
                        stringbuilder.Append("{ \"id\":\"" + dtChild.Rows[i]["InventoryDetailID"].ToString().Trim() + "\",\"text\":\"" + dtChild.Rows[i]["Number"].ToString().Trim() + "\",\"Name\":\"" + dtChild.Rows[i]["Name"].ToString().Trim() + "\",\"Unit\":\"" + dtChild.Rows[i]["Unit"].ToString().Trim() +
                          "\",\"Price\":\"" + dtChild.Rows[i]["Price"].ToString().Trim() + "\",\"Amount\":\"" + dtChild.Rows[i]["Amount"].ToString().Trim() + "\",\"AllPrice\":\"" + dtChild.Rows[i]["AllPrice"].ToString().Trim() + "\",\"Remark\":\"" + dtChild.Rows[i]["Remark"].ToString().Trim() + "\",\"Classification\":\"" + dtChild.Rows[i]["Classification"].ToString().Trim() + "\",\"InventoryDetailFur_id\":\"" + dtChild.Rows[i]["InventoryDetailFur_id"].ToString().Trim() +
                        "\",\"PriceNumber\":\"" + dtChild.Rows[i]["PriceNumber"].ToString().Trim() + "\",\"state\":\"closed\",\"children\":");
                        stringbuilder.Append(chidstring);



                    }
                    else
                    {
                        stringbuilder.Append("{\"id\":\"" + dtChild.Rows[i]["InventoryDetailID"].ToString().Trim() + "\",\"text\":\"" + dtChild.Rows[i]["Number"].ToString().Trim() + "\",\"Name\":\"" + dtChild.Rows[i]["Name"].ToString().Trim() + "\",\"Unit\":\"" + dtChild.Rows[i]["Unit"].ToString().Trim() +
                        "\",\"Price\":\"" + dtChild.Rows[i]["Price"].ToString().Trim() + "\",\"Amount\":\"" + dtChild.Rows[i]["Amount"].ToString().Trim() + "\",\"AllPrice\":\"" + dtChild.Rows[i]["AllPrice"].ToString().Trim() + "\",\"Remark\":\"" + dtChild.Rows[i]["Remark"].ToString().Trim() + "\",\"Classification\":\"" + dtChild.Rows[i]["Classification"].ToString().Trim() + "\",\"InventoryDetailFur_id\":\"" + dtChild.Rows[i]["InventoryDetailFur_id"].ToString().Trim() +
                            "\",\"PriceNumber\":\"" + dtChild.Rows[i]["PriceNumber"].ToString().Trim() + "\" },");
                    }
                }
                stringbuilder.Replace(',', ' ', stringbuilder.Length - 1, 1);
                stringbuilder.Append("]},");
            }
            return stringbuilder.ToString();
        }
        #endregion

从逻辑层调用的方法：

#region 查询清单明细
        public DataTable SelectedInventoryDetail(int ProjectOrderID)
        {
            SqlParameter[] mySQL = {
                                   new SqlParameter("@Type",SqlDbType.Char),  
                                   new SqlParameter("@ProjectOrderID",SqlDbType.Int)
                             
                                   };
            mySQL[0].Value = "SelectedInventoryDetail";
           //和存储过程名对应
            mySQL[1].Value = ProjectOrderID;
            DataTable dt = myDALMethod.DAL_SelectDB_Par("BillOfQuantities", mySQL);
            return dt;
            //把数据返回给控制器
        }
        #endregion

数据层的SQL查询语句：

if @Type='SelectedInventoryDetail'
	begin
SELECT     InventoryDetailID, ProjectOrderID,LTRIM(rtrim( Number))as Number,LTRIM (rtrim(PriceNumber)) as PriceNumber, ltrim(rtrim(Name)) as Name, ltrim(rtrim(Unit)) as Unit,LTRIM(rtrim(Price)) as Price, 
            Ltrim(rtrim(Amount)) as Amount,LTRIM(RTRIM(AllPrice)) as AllPrice, ltrim(rtrim(Remark)) as Remark,LTRIM(rtrim(Classification)) as Classification, InventoryDetailFur_id
FROM         SYS_InventoryDetailList                  
where  SYS_InventoryDetailList.ProjectOrderID=@ProjectOrderID

	end

（2）展开treegrid的方法：

（图 2）

//  展开下拉树
            function expand() {
         
               var BindingQuota = $('#Project').combobox('getValue');
                //这个是根据工程ID来展开的（如果你做的不需要任何条件，就不需要这个）
               $('#w清单明细').treegrid({url: '/GongChengLiangQingDan/SelectedInventoryDetail?ProjectOrderID='+BindingQuota });
              setTimeout(function () { aa(); }, 500);
              //调用展开方法
                          
             }
               function aa() {
                   $('#w清单明细').treegrid('expandAll');
                    //展开全部的treeg
 
               }

（3）合拢treegrid：

（图 3）

//合拢下拉树
               function collapse(){
                $('#w清单明细').treegrid('collapseAll');
               }

只供学习参考，禁止商业用途，否则后果自负！