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 ...
随机推荐
- Django 官方推荐的姿势:类视图
作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 在开发网站的过程中,有一些视图函数虽然处理的对象不同,但是其大致的代码逻辑是一样的. ...
- 第九周课程总结&实验报告(七)
实验任务详情: 完成火车站售票程序的模拟. 要求: (1)总票数1000张: (2)10个窗口同时开始卖票: (3)卖票过程延时1秒钟: (4)不能出现一票多卖或卖出负数号票的情况. 实验代码 pac ...
- mongodb学习笔记系列一
一.简介和安装 ./bin/mongod --dbpath /path/to/database --logpath /path/to/log --fork --port 27017 mongodb非常 ...
- Arduino学习笔记① 初识Arduino
1.前言 近段时间,博主陆续更新了ESP8266学习笔记,主要开发平台是Arduino.但是,对于很多无基础的初学者来说,甚至不了解Arduino是什么.因此,博主决定加入一个Arduino学 ...
- linux "No space left on device" 磁盘空间解决办法
某年某月某日某时,某人在工作中设置crontab定时任务规则保存时,提示“No space left on device”,此时用df -h检查磁盘,发现还有剩余空间.请问是什么原因及如何排查?什么会 ...
- vue-class-component使用Mixins
vue-class-component提供了mixinshelper函数,以类样式的方式使用mixins.通过使用mixins帮助程序,TypeScript可以推断mixin类型并在组件类型上继承它们 ...
- konva canvas插件写雷达图示例
最近,做了一个HTML5的项目,里面涉及到了雷达图效果,这里,我将react实战项目中,用到的雷达图单拎出来写一篇博客,供大家学习. 以下内容涉及的代码在我的gitlab仓库中:Konva canva ...
- Debian Buster 使用Lxde在界面中打开url提示错误解决
问题复现 这里我在VLC上看到个链接地址,蓝字部分,正常点击会跳转浏览器打开 可是 问题原因 非浏览器上点击url默认会使用xdg-open打开url 这里Debian Buster打包的时候,xdg ...
- Redis(十四)Redis 在Java Web 中的应用
在传统的 Java Web 项目中,使用数据库进行存储数据,但是有一些致命的弊端,这些弊端主要来自于性能方面. 由于数据库持久化数据主要是面向磁盘,而磁盘的读/写比较慢,在一般管理系统中,由于不存在高 ...
- django-URL重定向(八)
HttpResponseRedirect()不常用 redirect(to,permanent=False,*args,**kwargs) to:指重定向的位置,可以是视图,也可以是url地址,也可以 ...