easyui+ef实现省市区三级联动
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实现省市区三级联动的更多相关文章
- jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...
- 省市区三级联动 pickerView
效果图 概述 关于 省市区 三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...
- JS省市区三级联动
不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...
- ajax省市区三级联动
jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...
- QQ JS省市区三级联动
如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...
- 省市区三级联动(二)JS部分简单版
通过对上一篇<省市区三级联动>的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数. 注意:html部分和chuli.php部分不变 1.下拉列表填充可以写成带参数的 ...
- 从QQ网站中提取的纯JS省市区三级联动
在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...
- 基于ThinkPHP+AJAX的省市区三级联动
练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...
- java的JCombobox实现中国省市区三级联动
源代码下载:点击下载源代码 用xml存储中国各大城市的数据. xml数据太多了就不贴上了,贴个图片: 要解释xml,添加了一个jdom.jar,上面的源代码下载里面有. 解释xml的类: packag ...
随机推荐
- 使用eclipse在tomcat中设置项目启动的虚拟路径
很多时候我们在启动项目的时候都会在浏览器输入"localhost:+端口号+项目名称" 其实tomcat是可以省去这种麻烦的,通过设置项目的虚拟路径就可访问项目了 第一步 选择ec ...
- LeetCode 2: single-number II
Given an array of integers, every element appears three times except for one. Find that single one. ...
- KAFKA集群搭建(自带zookeeper)
1. KAFKA下载地址:http://kafka.apache.org/downloads KAFKA-快速上手-官方网站:http://kafka.apache.org/quickstart 2. ...
- Java网络编程(一)Socket套接字
一.基础知识 1.TCP:传输控制协议. 2.UDP:用户数据报协议. 二.IP地址封装 1.InetAddress类的常用方法 getLocalHost() 返回本地主机的InetAddress对象 ...
- day2------运算符和编码
运算符和编码 一. 格式化输出 现在有以下需求,让用户输入name, age, job,Gender 然后输出如下所示: ------------ info of Yong Jie --------- ...
- 常用html转义符,JavaScript转义符
HTML字符实体(Character Entities),转义字符串(Escape Sequence) 为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,> ...
- SpringCloud之Hystrix服务降级(七)
Hystrix设计原则 1.防止单个服务的故障,耗尽整个系统服务的容器(比如tomcat)的线程资源,避免分布式环境里大量级联失败.通过第三方客户端访问(通常是通过网络)依赖服务出现失败.拒绝.超时或 ...
- UART和RS232/RS485的关系是什么?
串口通讯是电子工程师和嵌入式开发工程师面对的最基本问题,RS232则是其中最简单最常用的通讯方式.但是初学者往往搞不清有关的名词如UART和RS232或RS485之间是什么关系,因为它们经常被放到语句 ...
- spark java api数据分析实战
1 spark关键包 <!--spark--> <dependency> <groupId>fakepath</groupId> <artifac ...
- Ambari 集群时间同步配置教程
本文原始地址:https://sitoi.cn/posts/27560.html 步骤 在时间同步主节点创建 ntp.conf 文件 在时间同步从节点上创建 ntp.conf 文件 修改所有节点时区 ...