Asp.net MVC中EasyUI Commobox和Combotree綁定和獲取數據

原創 smartsmile2012 2018-11-08 07:20 
=============================combobox綁定和獲取數據====================================
1、獲取選中的值
$('#comboboxlist').combobox('getValue');  //單選時
$('#comboboxlist').combobox('getValues'); //多選時
2、賦值
$('#comboboxlist').combobox('setValue', '北京'); 


$('#cbbStatus').combobox({
	url: '@Url.Action("GetHouseStatue", "HouseInfo")',
	valueField: 'Value',
	textField: 'Text',
	onSelect: function (res) {
		console.log(res);
	}
});

<input id="cbbStatus" class="easyui-combobox" data-options="prompt:' - 選擇狀態 - '" editable="false" />


#region 獲取房源信息狀態
public ActionResult GetHouseStatue()
{
	//房源狀態0待審覈1審覈通過2審覈不通過3上架4下架
	List<ComboboxData> models = new List<ComboboxData>();
	models.Add(new ComboboxData() { Text = "待審覈", Value = "0" });
	models.Add(new ComboboxData() { Text = "審覈通過", Value = "1" });
	models.Add(new ComboboxData() { Text = "審覈不通過", Value = "2" });
	models.Add(new ComboboxData() { Text = "上架", Value = "3" });
	models.Add(new ComboboxData() { Text = "下架", Value = "4" });
	return Json(models, JsonRequestBehavior.AllowGet);
}
#endregion

==========================================combotree綁定和獲取數據=================================

$(function () {
	$("#cbt").combotree({
		width: 175,
		url: '@Url.Action("GetComboTreeJson", "Test")',
		valueField: 'id',
		textField: 'text',
		editable: false
	});

	$("#btnSubmit").click(function () {
		//獲取當前combotree的tree對象
		var tree = $('#cbt').combotree('tree');
		//獲取當前選中的節點
		var data = tree.tree('getSelected');
		//查看當前選中節點的id
		console.log("選擇的數據", data.id, data.text);
	});
});

/// <summary>
/// 異步加載無限Tree
/// </summary>
/// <returns></returns>
[HttpPost]        
public string GetComboTreeJson()
{
	//easyui 會每展開一個節點，往後端傳一個id
	string parentNodeId = RequestHelper.GetString("id") ?? null;
	if (string.IsNullOrEmpty(parentNodeId))
	{
		parentNodeId = "0";
	}
	List<TreeModule> tree = GetSubNodes(parentNodeId, "module_fatherid","module_id", "module_name");
	string JsonStr = JsonConvert.SerializeObject(tree);
	return JsonStr;
}

/// <summary>
/// 獲取ComboTree方法
/// </summary>
/// <param name="parentNodeId">父節點數據</param>
/// <param name="fatherColumn">父節點字段名</param>
/// <param name="idColumn">ID字段名</param>
/// <param name="textColumn">TEXT字段名</param>
/// <returns></returns>
private List<TreeModule> GetSubNodes(string parentNodeId, string fatherColumn,string idColumn,string textColumn)
{
	DataTable dt = CreateDT();
	List<TreeModule> Tree = new List<TreeModule>();
	TreeModule TM = null;
	if (dt != null && dt.Rows.Count > 0)
	{
		DataRow[] rows = dt.Select(string.Format("{0} = '{1}'", fatherColumn, parentNodeId));
		foreach (DataRow item in rows)
		{
			string id = item[idColumn].ToString();
			string text = item[textColumn].ToString();
			TM = new TreeModule();
			DataRow[] IsNulRows = dt.Select(string.Format("{0} = '{1}'", fatherColumn, id));
			if (IsNulRows.Length > 0)
			{
				//這個很關鍵，此節點爲closed狀態，纔可以展開，才能往後臺傳你點擊的id  
				//看到Combotree的異步加載Demo，發現treegrid_data.json中 state="closed" 屬性能把點擊展開的節點Id傳到後臺中
				TM.state = "closed";
			}
			TM.id = id;
			TM.text = text;
			Tree.Add(TM);
		}
	}
	return Tree;
}

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>HouseInfo信息列表</title>
    <link type="text/css" rel="stylesheet" href="/css/default.css" />
    <!--easyui-->
    <link rel="stylesheet" type="text/css" href="/JS/jquery-easyui-1.5.5.5/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="/JS/jquery-easyui-1.5.5.5/themes/default/tree.css" />
    <link rel="stylesheet" type="text/css" href="/JS/jquery-easyui-1.5.5.5/themes/icon.css" />
    <script type="text/javascript" src="/JS/jquery-easyui-1.5.5.5/jquery.min.js"></script>
    <script type="text/javascript" src="/JS/jquery-easyui-1.5.5.5/jquery.easyui.min.js"></script>
    <script src="/Js/jquery-easyui-1.5.5.5/locale/easyui-lang-zh_CN.js"></script>
    <script src="~/Js/layer-v3.1.1/layer.js"></script>
    <script src="~/Js/LayerExt.js"></script>
    <script src="~/Js/JqueryExt.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#datagrid1").datagrid({
                //title: "HouseInfo信息列表",
                url: "@Url.Action("GetList", "HouseInfo")",
                striped: true,     //交替行換色
                rownumbers: true,  //行號
                pagination: true,  //顯示底部分頁
                fitColumns: true,//自動適應。先給列隨便加個寬度
                toolbar: "#tb",
                pagePosition: "bottom", // top|bottom|both
                pageSize: 15,
                pageList: [15, 30, 50, 100],
                singleSelect: true, //如果爲true，則只允許選擇一行。
                checkOnSelect: false, //true，當用戶點擊行的時候該複選框就會被選中或取消選中。
                selectOnCheck: true, //true，單擊複選框將永遠選擇行。
                onClickRow: function (index, row) {
                    //var d_id = row["UserID"];
                    //alert(d_id);
                },
                columns: [[
                    //{ field: 'HouseID', title: '主鍵ID', width: 120, align: 'center', sortable: true },
                    { field: 'HouseName', title: '房源名稱', width: 120, align: 'center', sortable: true },
                    { field: 'TypeID', title: '房源類型ID', width: 120, align: 'center', sortable: true },
                    { field: 'PostUid', title: '發佈人ID', width: 120, align: 'center', sortable: true },
                    { field: 'HouseRent', title: '房源租金', width: 120, align: 'center', sortable: true },
                    { field: 'HouseUnit', title: '租金單位默認月', width: 120, align: 'center', sortable: true },
                    { field: 'HouseArea', title: '房源面積默認平方米', width: 120, align: 'center', sortable: true },
                    { field: 'ProvinceID', title: '省份ID', width: 120, align: 'center', sortable: true },
                    { field: 'CityID', title: '城市ID', width: 120, align: 'center', sortable: true },
                    { field: 'AreaID', title: '縣區ID', width: 120, align: 'center', sortable: true },
                    { field: 'CircleID', title: '商圈ID', width: 120, align: 'center', sortable: true },
                    { field: 'HouseStatue', title: '房源狀態0待審覈1審覈通過2審覈不通過3上架4下架', width: 120, align: 'center', sortable: true },
                    { field: 'IsDeleted', title: '是否已刪除0否1是', width: 120, align: 'center', sortable: true },
                    { field: 'AddDate', title: '新增時間', width: 120, align: 'center', sortable: true },
                    { field: 'OnsaleDate', title: '上架時間', width: 120, align: 'center', sortable: true },
                    { field: 'IsTop', title: '是否已置頂', width: 120, align: 'center', sortable: true },
                    { field: 'Dx', title: '操作', width: 120, align: 'center', formatter: formatOper }
                ]],
            });
            var p = $('#datagrid1').datagrid('getPager');
            $(p).pagination({
                beforePageText: '第',
                afterPageText: '頁    共 {pages} 頁',
                displayMsg: '當前顯示 {from}-{to} 條記錄,共 {total} 條記錄'
            });

            //獲取參數
            function GetParas() {
                var hstatus = $("#cbbStatus").combobox("getValue");
                var cbbHouseType = $("#cbbHouseType").combobox("getValue");
                var cbbProvince = $("#cbbProvince").combobox("getValue");
                var cbbCity = $("#cbbCity").combobox("getValue");
                var cbbArea = $("#cbbArea").combobox("getValue");
                var txtPostMan = $("#txtPostMan").textbox("getValue");
                var txtKeyword = $("#txtKeyword").textbox("getValue");
                var para = {
                    hstatus: hstatus,
                    cbbHouseType: cbbHouseType,
                    cbbProvince: cbbProvince,
                    cbbCity: cbbCity,
                    cbbArea: cbbArea,
                    txtPostMan: txtPostMan,
                    txtKeyword: txtKeyword
                };
                console.log(para);
                return para;
            }

            //查詢
            $("#btnQuery").click(function () {
                $('#datagrid1').datagrid('load', GetParas());
            });

            //清空
            $("#btnClear").click(function () {
                ClearForm();
            });

            //綁定房源信息狀態
            $('#cbbStatus').combobox({
                url: '@Url.Action("GetHouseStatue", "HouseInfo")',
                valueField: 'Value',
                textField: 'Text',
                onSelect: function (res) {
                    console.log(res);
                }
            });

            //綁定房源類型
            $('#cbbHouseType').combobox({
                url: '@Url.Action("GetHouseType", "HouseInfo")',
                valueField: 'Value',
                textField: 'Text',
                onSelect: function (res) {
                    console.log(res);
                }
            });

             //加載省份
            $('#cbbProvince').combobox({
                url: "@Url.Action("GetPca", "HouseInfo")",
                queryParams: { pId: 0 },
                valueField: 'Value',
                textField: 'Text',
                onChange: function () {
                    var value = $(this).combobox('getValue');
                    console.log("==選擇省份==", value)
                    GetCity(value);
                }
            });

            //加載城市
            function GetCity(pId) {

                $('#cbbCity').combobox({
                    url: "@Url.Action("GetPca", "HouseInfo")",
                    queryParams: { pId: pId },
                    valueField: 'Value',
                    textField: 'Text',
                    onChange: function () {
                        var value = $(this).combobox('getValue');
                        GetArea(value);
                        console.log("==選擇城市==", value)
                    }
                });
            }

            //加載區域
            function GetArea(pId) {
                $('#cbbArea').combobox({
                    url: "@Url.Action("GetPca", "HouseInfo")",
                    queryParams: { pId: pId },
                    valueField: 'Value',
                    textField: 'Text',
                    onChange: function () {
                        var value = $(this).combobox('getValue');
                        console.log("==選擇區域==", value)
                    }
                });
            }
        });

        //自定義操作列
        function formatOper(val, row, index) {
            var str = "";
            str += '<a href="javascript:void(0);" onclick="doShow(' + row.HouseID + ')">查看</a>';
            str += '&nbsp;&nbsp;&nbsp;&nbsp;';
            str += '<a href="javascript:void(0);" onclick="doEdit(' + row.HouseID + ')">修改</a>';
            str += '&nbsp;&nbsp;&nbsp;&nbsp;';
            str += '<a href="javascript:void(0);" onclick="doDelete(' + row.HouseID + ')">刪除</a>';
            return str;
        }

        function doAdd() {
            var url = "@Url.Action("Add", "HouseInfo")";
            LayerOpen(url, "新增信息", "800px", "600px")
        }

        function doShow(a) {
            var url = "@Url.Action("Show", "HouseInfo")" + "?id=" + a;
            LayerOpen(url, "查看信息", "800px", "600px")
        }

        function doEdit(a) {
            var url = "@Url.Action("Edit", "HouseInfo")" + "?id=" + a;
            LayerOpen(url, "修改信息", "800px", "600px")
        }

        function doDelete(a) {
            layer.confirm("確認刪除？", { btn: ['確定', '取消'] }, function (index) {
                $.ajax({
                    type: "post",
                    timeout: 3000,
                    url: "@Url.Action("Delete", "HouseInfo")",
                    data: { id: a },
                    dataType: "json", //返回數據形式爲json
                    success: function (result) {
                        if (result.success) {
                            $('#datagrid1').datagrid('reload')
                            layer.alert("刪除成功！", { icon: 1 }, function () {
                                layer.closeAll();
                            });
                        }
                    },
                    error: function (errorMsg) {
                        layer.alert("數據操作失敗，請稍後重試！", { icon: 2 });
                    }
                });
            });
        };


    </script>
</head>
<body>
    <div>
        <table id="datagrid1"></table>
        <div id="tb" class="datagrid_tb">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="doAdd()">新增房源</a>
            <input id="cbbStatus" class="easyui-combobox" data-options="prompt:' - 選擇狀態 - '" editable="false" />
            <input id="cbbHouseType" class="easyui-combobox" data-options="prompt:' - 房源類型 - '" editable="false" />
            <input id="cbbProvince" class="easyui-combobox" data-options="prompt:' - 選擇省份 - '" editable="false" />
            <input id="cbbCity" class="easyui-combobox" data-options="prompt:' - 選擇城市 - '" editable="false" />
            <input id="cbbArea" class="easyui-combobox" data-options="prompt:' - 選擇縣區 - '" editable="false" />
            <input id="txtPostMan" class="easyui-textbox" data-options="prompt:'發佈人名稱'" />
            <input id="txtKeyword" class="easyui-textbox" data-options="prompt:'房源名稱'" />
            &nbsp;&nbsp;
            <a href="javascript:void(0)" id="btnQuery" class="easyui-linkbutton" iconcls="icon-search">查詢</a>&nbsp;&nbsp;
            <a href="javascript:void(0)" id="btnClear" class="easyui-linkbutton" iconcls="icon-clear">清空</a>
        </div>
    </div>
</body>
</html>
using CRM.Core.Dal;
using CRM.Core.Model;
using Magic.Tool;
using Newtonsoft.Json;
using Newtonsoft.Json.Converters;
using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.Web.Mvc;
using CRM.Other;

namespace SiteProject.Areas.Admin.Controllers
{
    public class HouseInfoController : Controller
    {
        #region 獲取數據（一條）
        /// <summary>
        /// 獲取數據（一條）
        /// </summary>
        /// <returns></returns>
        public ActionResult Show()
        {
            int id = Magic.Tool.RequestHelper.GetInt("id", 0);
            var mode = DataRootBase.Context.From<HouseInfo>().Where(p => p.HouseID == id).ToFirstDefault();
            IsoDateTimeConverter timeFormat = new IsoDateTimeConverter();
            timeFormat.DateTimeFormat = "yyyy-MM-dd HH:mm:ss";
            ViewBag.Data = JsonConvert.SerializeObject(mode, timeFormat);
            return View();
        }
        #endregion

        #region 修改數據（一條）
        [HttpGet]
        public ActionResult Edit()
        {
            int id = Magic.Tool.RequestHelper.GetInt("id", 0);
            var mode = DataRootBase.Context.From<HouseInfo>().Where(p => p.HouseID == id).ToFirstDefault();
            IsoDateTimeConverter timeFormat = new IsoDateTimeConverter();
            timeFormat.DateTimeFormat = "yyyy-MM-dd HH:mm:ss";
            ViewBag.Data = JsonConvert.SerializeObject(mode, timeFormat);
            return View();
        }

        [HttpPost]
        /// <summary>
        /// 修改數據（一條）
        /// </summary>
        /// <returns></returns>
        public ActionResult Edit(HouseInfo data)
        {
            var result = new Result();
            try
            {
                int i = DataRootBase.Context.Update<HouseInfo>(data);
                result.success = (i > 0) ? true : false;
            }
            catch (Exception ex)
            {
                result.success = false;
                result.message = " 請檢查數據是否填寫正確";
            }
            return Json(result);
        }
        #endregion

        #region 新增數據（一條）
        [HttpGet]
        public ActionResult Add()
        {
            var mode = new HouseInfo();
            ViewBag.Data = mode;
            return View();
        }

        [HttpPost]
        /// <summary>
        /// 新增數據（一條）
        /// </summary>
        /// <returns></returns>
        public ActionResult Add(HouseInfo data)
        {
            var result = new Result();
            try
            {
                data.HouseUnit = 1;
                data.IsDeleted = false;
                data.AddDate = DateTime.Now;
                data.IsTop = false;
                int i = DataRootBase.Context.Insert<HouseInfo>(data);
                result.success = (i > 0) ? true : false;
            }
            catch (Exception ex)
            {
                result.success = false;
                result.message = " 請檢查數據是否填寫正確";
            }
            return Json(result);
        }
        #endregion

        #region 刪除數據（一條）
        [HttpPost]
        /// <summary>
        /// 刪除數據（一條）
        /// </summary>
        /// <returns></returns>
        public ActionResult Delete()
        {
            var result = new Result();
            int id = Magic.Tool.RequestHelper.GetInt("id", 0);
            try
            {
                int i = DataRootBase.Context.Delete<HouseInfo>(id);
                result.success = (i > 0) ? true : false;
            }
            catch (Exception)
            {
                result.success = false;
            }
            return Json(result);
        }
        #endregion        

        #region 獲取數據（列表）

        /// <summary>
        /// 獲取數據（列表）
        /// </summary>
        /// <returns></returns>
        public ActionResult List()
        {
            return View();
        }

        public ActionResult GetList()
        {
            string status = RequestHelper.GetString("hstatus");
            string cbbHouseType = RequestHelper.GetString("cbbHouseType");
            string cbbProvince = RequestHelper.GetString("cbbProvince");
            string cbbCity = RequestHelper.GetString("cbbCity");
            string cbbArea = RequestHelper.GetString("cbbArea");
            string txtPostMan = RequestHelper.GetString("txtPostMan");
            string txtKeyword = RequestHelper.GetString("txtKeyword");

            int pageIndex = Magic.Tool.RequestHelper.GetInt("page", 0);  //當前頁碼  
            int pageSize = Magic.Tool.RequestHelper.GetInt("rows", 0);  //每頁顯示記錄數  
            string sort = Magic.Tool.RequestHelper.GetString("sort"); //排序字段名。  
            string order = Magic.Tool.RequestHelper.GetString("order"); //排序方式
            //查詢參數
            //string keyword = Magic.Tool.RequestHelper.GetString("keyword");
            //string beginDate = Magic.Tool.RequestHelper.GetString("beginTime");
            //string endDate = Magic.Tool.RequestHelper.GetString("endTime");

            int TotalRecord = 0;
            int TotalPage = 0;
            string orderBy = string.Format("{0} {1}", sort, order); //排序
            orderBy = string.IsNullOrWhiteSpace(orderBy) ? "HouseID" : orderBy;
            //執行存儲過程
            var result = DataRootBase.QueryPagingMssql<HouseInfo>("HouseInfo", "*", orderBy, pageIndex, pageSize, "", out TotalRecord, out TotalPage);

            ResultEasyUI data = new ResultEasyUI();
            data.total = TotalRecord;
            List<JObject> list = new List<JObject>();
            foreach (var item in result)
            {
                list.Add(JObject.FromObject(item));
            }
            data.rows = list;
            //格式化時間
            IsoDateTimeConverter timeFormat = new IsoDateTimeConverter();
            timeFormat.DateTimeFormat = "yyyy-MM-dd HH:mm:ss";

            var JsonStr = JsonConvert.SerializeObject(data, timeFormat);
            return Content(JsonStr);
        }
        #endregion

        #region 返回通知類
        /// <summary>
        /// 返回通知類
        /// </summary>
        public class Result
        {
            public bool success { set; get; }
            public string message { set; get; }
        }
        #endregion

        #region 獲取房源信息狀態
        public ActionResult GetHouseStatue()
        {
            //房源狀態0待審覈1審覈通過2審覈不通過3上架4下架
            var models = SiteCommonData.GetHouseInfoStatus();
            return Json(models, JsonRequestBehavior.AllowGet);
        }
        #endregion

        #region 獲取房源類型
        public ActionResult GetHouseType()
        {
            var models = DataRootBase.Context.From<HouseType>().ToList();
            List<ComboboxData> lists = new List<ComboboxData>();
            foreach (var item in models)
            {
                lists.Add(new ComboboxData() { Text = item.TypeName, Value = item.TypeID.ToString() });
            }
            return Json(lists, JsonRequestBehavior.AllowGet);
        }
        #endregion

        #region 獲取省市縣
        /// <summary>
        /// 獲取省市縣
        /// </summary>
        /// <param name="pId"></param>
        /// <returns></returns>
        public ActionResult GetPca(int pId)
        {
            var models = DataRootBase.Context.From<CRM.Core.Model.Areas>()
                .Where(p => p.ParentId == pId).ToList();

            var list = new List<ComboboxData>();
            foreach (var item in models)
            {
                list.Add(new ComboboxData() { Value = item.Id.ToString(), Text = item.Name });
            }
            list.Insert(0, new ComboboxData { Value = "0", Text = "請選擇" });
            return Json(list, JsonRequestBehavior.AllowGet);
        }
        #endregion
    }
}

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章