1.引用easyui样式及脚本文件

2.数据库创建表(自联表)及数据建模(Code First)

use DataBase
go
CREATE TABLE OP_SJ
(
CID UNIQUEIDENTIFIER PRIMARY KEY DEFAULT(NEWID()),
PCID UNIQUEIDENTIFIER,
CNO VARCHAR(50),
CTEXT VARCHAR(50)
)

数据建模:Models =》添加=》新建项=》左侧选择Date=》ADO.NET 实体数据模型=》添加=》来自数据库的Code First=》选择对应数据库及要建模的表

3.前端js和h5代码

<script type="text/javascript">
window.onload = function () {
$.ajax({
model: "raw",
async: true,
type: "get",
url: "/SJLD/GETALL",
success: function (data) {
if (data != null && data.length > 0) {
$("#sheng").combobox({
editable: false,
data: data,
valueField: 'CID',
textField: 'CTEXT',
onLoadSuccess: function (data) {
$(this).combobox("setValue", data[0].CID);
shi(data[0].CID);
},
onSelect: function (record) {
shi(record.CID);
}
})
}
}
})
}
function shi(id) {
$.ajax({
type: "get",
url: "/SJLD/shi",
data: 'id=' + id,
success: function (data) {
if (data != null && data.length > 0) {
$("#shi").combobox({
editable: false,
data: data,
valueField: 'CID',
textField: 'CTEXT',
onLoadSuccess: function (data) {
$(this).combobox("setValue", data[0].CID);
qu(data[0].CID);
},
onSelect: function (record) {
qu(record.CID);
}
})
}
}
})
}
function qu(id) {
$.ajax({
type: "get",
url: "/SJLD/qu",
data: 'id=' + id,
success: function (data) {
if (data != null && data.length > 0) {
$("#qu").combobox({
editable: false,
data: data,
valueField: 'CID',
textField: 'CTEXT',
onLoadSuccess: function (data) {
$(this).combobox("setValue", data[0].CID);
}
})
}
}
})
}
</script> <div> 省:<input id="sheng" class="easyui-combobox" name="sheng" /> 市:<input id="shi" class="easyui-combobox" name="shi" /> 区:<input id="qu" class="easyui-combobox" name="qu" /> </div>

4.新建控制器及后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization.Json;
using System.Web;
using System.Web.Helpers;
using System.Web.Mvc;
using LD.Models;
using Newtonsoft.Json; namespace LD.Controllers
{
public class SJLDController : Controller
{
Model1 db = new Model1();
// GET: SJLD
public ActionResult Index()
{
return View();
}
public ActionResult GETALL()
{
var all = db.OP_SJ.Where(m => m.PCID == null).ToList();
return Json(all, JsonRequestBehavior.AllowGet);
}
public ActionResult shi(Guid id)
{
var linq = db.OP_SJ.Where(m => m.PCID == id).ToList();
return Json(linq, JsonRequestBehavior.AllowGet);
}
public object qu(Guid id)
{
var linq = db.OP_SJ.Where(m => m.PCID == id).ToList();
return Json(linq, JsonRequestBehavior.AllowGet);
}
}
}

5.效果

easyui+ef实现省市区三级联动的更多相关文章

  1. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  2. 省市区三级联动 pickerView

    效果图 概述 关于 省市区 三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...

  3. JS省市区三级联动

    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...

  4. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  5. QQ JS省市区三级联动

    如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...

  6. 省市区三级联动(二)JS部分简单版

    通过对上一篇<省市区三级联动>的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数. 注意:html部分和chuli.php部分不变 1.下拉列表填充可以写成带参数的 ...

  7. 从QQ网站中提取的纯JS省市区三级联动

    在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...

  8. 基于ThinkPHP+AJAX的省市区三级联动

    练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...

  9. java的JCombobox实现中国省市区三级联动

    源代码下载:点击下载源代码 用xml存储中国各大城市的数据. xml数据太多了就不贴上了,贴个图片: 要解释xml,添加了一个jdom.jar,上面的源代码下载里面有. 解释xml的类: packag ...

随机推荐

  1. POJ 1035 Spell checker(串)

    题目网址:http://poj.org/problem?id=1035 思路: 看到题目第一反应是用LCS ——最长公共子序列 来求解.因为给的字典比较多,最多有1w个,而LCS的算法时间复杂度是O( ...

  2. POJ 3020 Antenna Placement(二分图 匈牙利算法)

    题目网址:  http://poj.org/problem?id=3020 题意: 用椭圆形去覆盖给出所有环(即图上的小圆点),有两种类型的椭圆形,左右朝向和上下朝向的,一个椭圆形最多可以覆盖相邻的两 ...

  3. 面试官,不要再问我“Java 垃圾收集器”了

    如果Java虚拟机中标记清除算法.标记整理算法.复制算法.分代算法这些属于GC收集算法中的方法论,那么"GC收集器"则是这些方法论的具体实现. 在面试过程中这个深度的问题涉及的比较 ...

  4. linux+jenkins+github+python持续集成

    1.服务器上事先安装jenkins   参见:linux上war包方式安装Jenkins 2.新建一个自由风格的job,名字随意起 3.配置git(拉取github代码) 从github复制pytho ...

  5. 08 python学习笔记-随机生成大乐透号码(八)

    1 #产生大乐透号码 2 #前区 1-32,5 后区 1-12,2 3 #1.前区从1-32中级取5个,后区再从1-12里面取2个 4 #01 02 03 04 5 def dlt(): #生成随机大 ...

  6. fenby C语言 P9

    逻辑运算 真1 假0 &&与 真&&真为真 真&&假为假 假&&真为假 假&&假为假 ||或 真||真为真 真||假为真 ...

  7. 微服务SpringCloud之服务网关zuul二

    Zuul的核心 Filter是Zuul的核心,用来实现对外服务的控制.Filter的生命周期有4个,分别是“PRE”.“ROUTING”.“POST”.“ERROR”,整个生命周期可以用下图来表示. ...

  8. nginx原理和优化

    Nginx的模块与工作原理 Nginx由内核和模块组成,其中,内核的设计非常微小和简洁,完成的工作也非常简单,仅仅通过查找配置文件将客户端请求映射到一个location block(location是 ...

  9. SQlite 日期时间总结

    1. 时间串转时间戳,函数strftime,其参数1是固定'%s',参数2是待转换的时间串,参数3...是修饰符 (1)select strftime('%s','2004-01-01 02:34:5 ...

  10. Java基础系列二:Java泛型

    该系列博文会告诉你如何从入门到进阶,一步步地学习Java基础知识,并上手进行实战,接着了解每个Java知识点背后的实现原理,更完整地了解整个Java技术体系,形成自己的知识框架. 一.泛型概述 1.定 ...