李炎恢 ComboGrid(数据表格下拉框)：读取Json文件中的数据

 1、新建JsData文件夹中添加content.json文件。内容如下：

 

 [
 {
  "id" : 1,
  "user" : "蜡笔小新",
  "email" : "xiaoxin@163.com",
  "date" : "2014-10-1"
 },
 {
  "id" : 2,
  "user" : "樱桃小丸子",
  "email" : "xiaowanzi@163.com",
  "date" : "2014-10-2"
 },
 {
  "id" : 3,
  "user" : "黑崎一护",
  "email" : "yihu@163.com",
  "date" : "2014-10-3"
 }
]

2、创建类

    public class JsonHelper
    {
        /// <summary>
        /// json文件 => json字符串
        /// </summary>
        /// <param name="filepath"></param>
        /// <returns></returns>
        public static string GetFileJson(string filepath)
        {
            string json = string.Empty;
            using (FileStream fs = new FileStream(filepath, FileMode.Open, System.IO.FileAccess.Read, FileShare.ReadWrite))
            {
                using (StreamReader sr = new StreamReader(fs, Encoding.GetEncoding("UTF-8")))
                {
                    json = sr.ReadToEnd().ToString();
                }
            }
            return json;
        }
    }

3、添加控制器

        public ActionResult JsonData()
        {
            try
            {
                string filepath = Server.MapPath("~/JsData/content.json");
                string js = JsonHelper.GetFileJson(filepath);
                return Content(js);
            }
            catch (Exception ex)
            {
                return null;
            }
        } 

4、esayui 

     <select id="box" class="easyui-combogrid" name="dept" style="width:250px;"
            data-options=" panelWidth:450,
            value:'请选择一个值',
            idField:'id',
            textField:'user',
           
            url:'/Home/JsonData',
            columns:[[
            {
                field:'user',
                title:'帐号',
                width:120
            },
            {
                field:'email',
                title:'邮箱',
                width:120
            },
            {
                field:'date',
                title:'创建时间',
                width:120},
            ]] "></select>

 

 其它：

 fitColumns : true,  自适应宽度（首先要设置宽度值）

 

 

js加载： 

 <input id="box2" value="请选择一个用户"/>

 

            $('#box2').combogrid({
                panelWidth: 600, idField: 'id', textField: 'user', url: '/Home/JsonData', columns:
                    [[
                        {
                            field: 'id', title: '编号',width: 120,
                        },
                        {
                            field: 'user', title: '帐号', width: 120,
                        },
                        {
                            field: 'email', title: '邮箱', width: 120,
                        },
                        {
                            field: 'date', title: '创建时间', width: 120,
                        },
                ]]
            });